Slider di immagini con Jquery

Con Easy Slider, in pochi passi è possibile realizzare uno slider di immagini o di contenuti senza l’ausilio di flash ma con i soli css. Per intenderci ciò che andremo ad analizzare è il seguente script http://cssglobe.com/lab/easyslider1.5/02.html.

Per far ciò, sostanzialmente andremo a modificare css ed html, per cui preparate il vostro foglio di lavoro e partiamo. Di seguito 3 semplici passi per realizzare uno slider jquery:

1. Le librerie

Incollare il codice sottostante nell’area dedicata ai tag HEAD:

<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/easySlider1.7.js” type=”text/javascript”></script>
<link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” />

Nelle prime due righe includo la libreria Jquery e EasySlider, nella terza riga, invece, includo il foglio di stile.

2. La funzione

Incollare il seguente codice subito dopo l’inclusione delle librerie, sempre fra i tag HEAD, servirà per dare vita al nostro slider:

<script type=”text/javascript”>
$(document).ready(function(){
$(“#slider”).easySlider({
auto: true,
continuous: true
});
});
</script>

auto:true e continuos:true sono solo alcune proprietà settate di default all’interno della funzione, in realtà possiamo personalizzare il nostro slider in mille modi differenti, ecco, infatti, una lista di azioni supportate da Easy Slider che possono tranquillamente essere aggiunte:

prevId: ‘prevBtn’,
prevText: ‘Previous’,
nextId: ‘nextBtn’,
nextText: ‘Next’,
controlsShow: true,
controlsBefore: ”,
controlsAfter: ”,
controlsFade: true,
firstId: ‘firstBtn’,
firstText: ‘First’,
firstShow: false,
lastId: ‘lastBtn’,
lastText: ‘Last’,
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false

Riepilogando, se volessi dare al mio slider una velocità di scorrimento maggiore non farò altro che modificare la funzione descritta precedentemente in questo modo:

<script type=”text/javascript”>
$(document).ready(function(){
$(“#slider”).easySlider({
auto: true,
continuous: true,
speed:1000
});
});
</script>

Seguendo quella lista di proprietà supportate da EasySlider ho accodato alle due gia esistenti speed:1000, ossia, ho personalizzato la velocità di scorrimento dello slider. Chiaramente tutte le altre proprietà che non risiedono nella funzione acquisiranno di default un valore prestabilito.

3. HTML

La parte più semplice e divertente è quella dell’html, la semplicità di utilizzo di jquery sta proprio nell’html:

<div id=”slider”>
<ul>
<li><a href=”http://www.marioconcina.it/blog”><img src=”images/01.jpg” alt=”” /></a></li>
<li><a href=”http://www.marioconcina.it/blog”><img src=”images/02.jpg” alt=”” /></a></li>
<li><a href=”http://www.marioconcina.it/blog”><img src=”images/03.jpg” alt=”” /></a></li>
<li><a href=”http://www.marioconcina.it/blog”><img src=”images/04.jpg” alt=”” /></a></li>
<li><a href=”http://www.marioconcina.it/blog”><img src=”images/05.jpg” alt=”” /></a></li>
</ul>
</div>

All’interno di un div padre che chiamo Slider risiede una lista che posso modificare a mio piacimento. Ogni tag LI altro non è che un frame dello slider all’interno del quale posso inserire sia del testo che delle immagini (in questo caso sono immagini).
Avete visto come in 3 semplici passi è possibile creare un semplicissimo slider di immagini o contenuto con Jquery, la bravura sta nel destreggiarsi con i css e modificarlo a vostro piacimento. Insomma, io vi ho dato la bicicletta, sta a voi pedalare.

4. Download

Scarica Easyslider 1.7, zip completo di librerie, e file d’esempio.