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.
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? 😉
