Corsi on-line

jQuery Easy Slider: creare gallerie a slide (scorrimento)

In questo post vi segnalo un bellissimo plugin per jQuery che consente di gestire ottimamente lo slide (slittamento) di immagini o contenuti HTML. Grazie all’effetto slider è possibile creare gallerie di immagini oppure creare pagine accattivanti mostrando diversi contenuti all’interno del medesimo ingombro attraverso dei semplici pulsanti Avanti e Indietro.
La transizione da un’immagine all’altra (o da un contenuto all’altro) avviene, appunto, mediante lo slide: un contenuto scorre fuori dall’area di visualizzazione mentre l’altro prende il suo posto.

Il plugin in questione si chiama EasySlider e può essere scaricato da questa pagina.
L’utilizzo del plugin è molto semplice: basta includere i file .js della libreria jQuery e del plugin ed aggiungere qualche istruzione al foglio di stile CSS. Fatto questo sarà sufficiente creare l’elemento “a scorrimento” (create un contenitore con ID univoco ed al suo interno posizionate una lista di elementi):

<div id="slider">
  <ul>
  <li>contenuto N.1</li>
  <li>contenuto N.2</li>
  <li>contenuto N.3</li>
  </ul>
</div>

Ora non resta che istanziare il metodo easySlider() sull’elemento contenitore aggiungendo nell’header della pagina:

<script type="text/javascript">
$(document).ready(function(){	
  $("#slider").easySlider();
});
</script>

Il metodo dispone easySlider() di diverse opzioni che consentono di customizzare la direzione dello slide (verticale o orizzontale), la velocità dell’effetto nonchè le etichette per i bottoni di navigazione.

Per vedere il plugin all’opera clicca su questo link.

Post correlati
I più letti del mese
Tematiche