Slider jQuery ad effetto fade

Oggi il nostro assiduo autore Giacomo ci propone questo splendido slider realizzato in jQuery davvero minimale e di sicuro impatto.Vediamo le feature principali dello slider.

Con questo slider potremo facilmente inserire descrizioni, e immagini che scorreranno con un gradevole effetto fade.

GUARDA LA DEMO DELLO SLIDER

Iniziamo!

01. Struttura dello slider e funzionamento

$(document).ready(function() {

	$('#slide_container #slide img').hide() //nascondiamo tutte le immagini della slide

	$('#slide_container #slide img').eq(0).show(); //mostriamo la prima immagine

	$('#slide_container .desc').hide() //nascondiamo tutte le descrizioni

	$('#slide_container .desc').eq(0).show(); //mostriamo la prima descrizione

	var current = 0; //creiamo una variabile che conterrà l'indice dell'immagine visibile

	var limit = $("#slide_container").find("img").length; //creiamo una variabile con il numero delle immagini della slide

	limit = limit-1; //diminuiamo il limite di 1

	var timer = 800; //imposto il tempo dell'animazione

	var animation = 5000; //tempo da attendere per lo scorrimento automatico (in millisecondi)

	var timeout = setTimeout(slideRight, animation);

	function slideRight() {
		if(current != limit) { // se current diverso da limit
			$('#slide_container #slide img').eq(current).fadeOut(timer); //nascondo l'immagine visibile
			$('#slide_container #slide img').eq(current+1).fadeIn(timer); //mostro l'immagine successiva
			$('#slide_container .desc').eq(current).hide(); //nascondo la descrizione visibile
			$('#slide_container .desc').eq(current+1).show(); //mostro la descrizione successiva
			current++; //aumento current di 1
			clearTimeout(timeout);
			timeout = setTimeout(slideRight, animation);
			return false; //annullo la normale azione del link
		} else { // se current è uguale a limit
			$('#slide_container #slide img').eq(current).fadeOut(timer); //nascondo l'immagine visibile
			$('#slide_container #slide img').eq(0).fadeIn(timer); //mostro la prima immagine
			$('#slide_container .desc').eq(current).hide(); //nascondo la descrizione visibile
			$('#slide_container .desc').eq(0).show(); //mostro la prima descrizione
			current = 0; //faccio diventare current 0
			clearTimeout(timeout);
			timeout = setTimeout(slideRight, animation);
			return false; //annullo la normale azione del link
		}
	}

	function slideLeft() {
		if (current != 0) { // se current diverso da 0
			$('#slide_container #slide img').eq(current).fadeOut(timer); //nascondo l'immagine visibile
			$('#slide_container #slide img').eq(current-1).fadeIn(timer); //mostro l'immagine precedente
			$('#slide_container .desc').eq(current).hide(); //nascondo la descrizione visibile
			$('#slide_container .desc').eq(current-1).show(); //mostro la descrizione precedente
			current--; //diminuisco current di 1
			clearTimeout(timeout);
			timeout = setTimeout(slideRight, animation);
			return false; //annullo la normale azione del link
		} else { //se current è uguale a 0
			$('#slide_container #slide img').eq(0).fadeOut(timer); //nascondo l'immagine visibile
			$('#slide_container #slide img').eq(limit).fadeIn(timer); //mostro l'ultima immagine
			$('#slide_container .desc').eq(0).hide(); //nascondo la descrizione visibile
			$('#slide_container .desc').eq(limit).show(); //mostro l'ultima descrizione
			current = limit; //imposto current uguale a limit
			clearTimeout(timeout);
			timeout = setTimeout(slideRight, animation);
			return false; //annullo la normale azione del link
		}
	}

	$('#botton a.right').click(function() { //al click del bottone destro facciamo qualcosa
		slideRight();
		clearTimeout(timeout);
		timeout = setTimeout(slideRight, animation);
	})

	$('#botton a.left').click(function() { //al click del bottone sinistro facciamo qualcosa
		slideLeft();
		clearTimeout(timeout);
		timeout = setTimeout(slideRight, animation);
	})
})

Il codice è perfettamente commentato, pertanto per capire il funzionamento seguite passo passo i commenti ;). Ovviamente lo slider è modificabile a piacimento, vediamo come.

02. Guida all’utilizzo dello slider

<div id="slide">
    	<img src="img/img1.png" />
        <img src="img/img2.png" />
        <img src="img/img3.png" />
        <img src="img/img4.png" />
</div>

questo div conterrà le varie immagini. Ora dobbiamo impostare la descrizione in questo modo:

<div class="desc">
    	<div class="titolo">VOLPE</div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
         voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
         cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

NOTA:  è molto importante che il numero di questi div sia lo stesso di quello delle immagini, nel caso l’immagine non presenti alcune descrizione dovete comunque  creare uno di questi div senza nulla scritto dentro.

var timer = 800;

modificando questo parametro andremo a modificare il tempo in cui viene eseguita l’animazione delle immagini.

var animation = 5000;

modificando questo parametro andremo a modificare il tempo che serve aspettare per far si che le immagini scorrano in automatico.

03. Demo e Download

DEMO | DOWLOAD

04. Credits e future feature

Questo slider è stato sviluppato da Giacomo Pisani. E’ vietata la copia spudorata senza lasciare un link a targetweb.it o allo sviluppatore.

Vers. 1.0

Nelle prossime feature del plugin probabilmente vedremo come implementarlo su piattaforma WordPress per rendere più “dinamico” il nostro slider.