Il bello di jQuery è che più lo conosci, e più scopri funzionalità che semplificano la vita. In questo esempio vediamo come, grazie alla funzione appendTo() possiamo scombinare gli elementi del DOM e realizzare un mini-slider infinito. Certo, non aspettiamoci di poter fare miracoli… Quello che mi interessa sottolineare è come, con questa funzionalità, bastino poche righe per realizzare un sistema funzionale e facilmente implementabile in ogni progetto.

tasto per vedere la demo del tutorial

Let’s go! E’ tempo di HTML!

Bando alle ciance, è tempo di scrivere il nostro codice HTML! Ci servirà davvero poco in termini di elementi del DOM: saranno sufficienti un wrapper che funga da maschera con dei box al suo interno, e due pulsanti di navigazione (avanti ed indietro):

<div id="slider">
	<div class="wrapper">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">4</div>
	</div>
	<a href="javascript:void(0);" class="prev">Prev</a> | <a href="javascript:void(0);" class="next">Next</a>
</div>

 

Il codice CSS, il gioco delle maschere

Riutilizzando il sistema di maschere già visto per la realizzazione del jQuery News Slider, implementiamo il nostro CSS. Come sempre, quello che riporto è a scopo puramente illustrativo, mi auguro invece che la vostra creatività si sbizzarrisca per realizzare qualcosa di stupefacente!

#slider {
	position:relative;
	width:420px;
	margin-left:100px;
	background:#CCC;
	padding:20px;
	height:200px;
	overflow:hidden;
	}
#slider .wrapper {
	height:200px;
	position:relative;
	width:870px;
	overflow:hidden;
	}
#slider .wrapper .box {
	background:red;
	width:200px;
	height:200px;
	float:left;
	margin:0 10px;
	}
#slider .wrapper .box:first-child {
	margin-left:0;
	}

E’ l’ora di jQuery! Animiamo la rotazione

Il codice, che ora spieghiamo, è il seguente:

$(function(){
	$("#slider .next").click(function(){
		$("#slider .wrapper .box:first").appendTo("#slider .wrapper");
	});	
	$("#slider .prev").click(function(){
		$("#slider .wrapper .box:last").prependTo("#slider .wrapper");
	});	
});

Come possiamo vedere fondamentalmente utilizziamo una riga di codice, che poi ripetiamo per il pulsante next e prev. Grazie alla combinazione delle funzioni appendTo() & prependTo() e dei selettori :first e :last realizziamo la nostra animazione. Le funzioni citate non fanno altro che prelevare l’elemento del DOM selezionato e spostarlo fisicamente all’inizio o alla fine del contenitore in questione (.wrapper). I selettori invece ci indicano quale elemento targetizzare. Nel nostro caso il primo o l’ultimo. E così, con queste semplicissime righe, il gioco è fatto. Stupendo no? 😉

tasto per vedere la demo del tutorial