Easy Slider – navigazione numerica per jQuery
Il nuovo sito internazionale di Ubuntu è veramente molto carino, la nuova grafica molto curata, il posizionamento dei menù e la facilità di navigazione rendono il vecchio sito lontano anni luce.
Una delle novità che mi piacciono di più è l’introduzione del pannello con immagini a scorrimento.
Mi sono così incuriosito ed utilizzando un particolare plugin per jQuery l’ho realizzato.
Easy Slider è un plugin che permette ai webmaster di creare slider orizzontali e verticali molto carini.
Easy Slider permette di creare degli scorrimenti di testo oppure di immagini in un click.
Vediamo come implementare Easy Slider.
Per prima cosa dobbiamo inserire tutti gli elementi che intendiamo far scorrere all’interno di un contenitore. Ecco un esempio di cosa dobbiamo scrivere:
<div id="slider"> <ul> <li>Contenuto 1…</li> <li>Contenuto 2…</li> <li>Contenuto 3…</li> … </ul> </div>
Possiamo inserire all’interno della lista qualunque genere di elemento vogliamo, siano immagini, testi e quant’altro. L’unica cosa a cui dobbiamo prestare attenzione è che gli elementi devono essere tutti delle stesse dimensioni.
visto che si tratta di un plugin jQuery, dobbiamo importare all’interno della pagina il file jquery.js ed easyslider.js:
<script src="/js/jquery.js" type="text/javascript"><!–mce:0–></script> <script src="/js/easySlider.js" type="text/javascript"><!–mce:1–></script>
Possiamo recuperare il file jquery.js direttamente dal sito ufficiale del progetto da qui, mentre easySlider.js lo possiamo recuperare da questo indirizzo.
A questo punto dobbiamo far iniziare l’azione; quindi inseriamo queste linee di codice all’interno di un ulteriore tag JavaScript.
All’interno dello stesso script potremo poi andare ad inserire opportunamente altre opzioni.
$(document).ready(function(){
$("
<li>slider").easySlider();
});
a questo punto dobbiamo andare a personalizzare il CSS. Lo stile di default di questo plugin è mostrato di seguito:
<li>slider ul,</li>
<li>slider li{
margin:0;
padding:0;
list-style:none;
}</li>
<li>slider,</li>
<li>slider li{
width:500px;
height:200px;
overflow:hidden;
}
span</li>
<li>prevBtn{} // Qui andrà inserito lo stile per i pulsanti
span</li>
<li>nextBtn{} // di scorrimento dello slide.
dobbiamo tener presente che è necessario mantenere le stesse dimensioni per l’area del contenuto e per ogni elemento della lista.
La proprietà overflow:hidden è obbligatoria, detto questo possiamo personalizzare il codice come vogliamo.
Una volta che il tutto viene implementato all’interno della nostra pagina, vengono inseriti in maniera del tutto automatica due pulsanti per la navigazione all’interno dello slide, fatti in questo modo:
<span id="prevId"><a href="javascript:void(0);">Previous</a></span> <span id="nextBtn"><a href="javascript:void(0);">Next</a></span>
Ad ogni click Easy Slider provvede a calcolare la posizione corrente, quindi si sposta in avanti oppure indietro. Per modificare il testo dei due pulsanti di scorrimento possiamo modificare il codice javascript che richiama Easy Slider, in questo modo:
$(document).ready(function(){
$("
<li>slider").easySlider({
prevText: ‘Indietro’,
nextText: ‘Avanti’
});
});
Le principali opzioni configurabili sono:
- prevId – id per il pulsante “previous”
- prevText – testo per il pulsante “previous”
- nextId – id per il pulsante “previous”
- nextText – testo per il pulsante “next”
- orientation – Possiamo inserire come valori horizontal o vertical. Se non specifichiamo niente, horizontal è di default.
- speed – è la velocità dell’animazione in millisecondi. Il valore di default è 800.
Più in generale possiamo usare come opzioni nel plugin:
- 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,
- numeric: false,
- numericId: ‘controls’
controlsShow
questa opzione è impostata di default su ‘true’. Se viene utilizzato come valore ‘false’ non saranno mostrati i controlli, e quindi l’utente non potrà interagire con lo slideshow.
controlsBefore e controlsAfter
Questi tag offrono un maggiore controllo sui pulsanti.
controlsFade
Di default è impostata su true. Se è impostato su false lo disabilita nascondere pulsante quando il cursore raggiunge la fine.
firstShow e lastShow
Questi parametri nasconde (o mostra) i pulsanti per andare alla prima o all’ultima slide.
auto
Questa opzione consente lo scorrimento automatico. Se si imposta a ‘true’ lo scorrimento viene avviato automaticamente e continua fino a quando l’utente non interviene cliccando sui pulsanti di controllo.
pause
Questa opzione viene settata per mezzo di un valore impostato in millisecondi e rappresenta la durata di ogni slide quando il plugin è impostato in modalità ‘auto’.
continuous
Se impostata a ‘true’ facendo clic sul pulsante Avanti quando il cursore ha raggiunto la fine, si otterrà un riavvolgimento alla prima diapositiva. La combinazione di questa opzione con ‘auto’, settando entrambe le opzioni a ‘true’, fa ottenere un’animazione infinita.
numeric
Se si imposta questa opzione a true otterrete navigazione numerica, senza i pulsanti Next / prev. Plugin creerà un elenco ordinato subito dopo il div. Elenco ordinato avrà l’esatto numero di elementi come il cursore.
numericId
Questa opzione definisce attributo id per la lista ordinata. È necessario utilizzare questo ID per selezionare l’elenco e lo stile con i CSS.