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