CSSREVOLT - blog personale di Filippo Buratti

Da tempo utilizzo nei miei lavori delle varianti personali del classico plugin Carousel, che sono ormai disponibili in tutte le salse per le più diffuse librerie javascript. Mi sono deciso a perfezionare un po' lo script per utilità personale, così da avere un classe subito pronta da utilizzare e di facile configurazione. La versione di Carosello presentata in questo articolo è basata sul framework Prototype versione 1.6, e deriva dagli script di Bruno Bornsztein (missingmethod.com)  e Victor Stanciu (victorstanciu.ro), il quale ha ultimamente pubblicato anche una nuova versione. Per quanto mi riguarda ho cercato di migliorare le possibilità di configurazione e alcune altre caratteristiche marginali; credo che ora sia ancora più semplice e veloce installare lo script e personalizzarne le funzioni in base alle diverse esigenze. E' possibile scegliere tra un effetto di scroll orizzontale o verticale, l'unica differenza è nellle regole CSS del div.scroller : variando la width è possibile decidere il tipo di movimento. Il markup HTML richiesto può essere più o meno questo:

Istanziare la classe Carosello.js è semplice:

A proposito dell'hash di opzioni che è possibile inserire come secondo argomento in fase d icreazione dell'istanza della classe, ecco le alternative disponibili:

• duration: (default 1.0), la durata del movimento di scroll.
• frequency: (default 4), in secondi la durata dell'intervallo tra una transizione e l'altra, se è attiva l'opzione autoglide.
• autoGlide: (default false), attiva la riproduzione automatica del carosello. On mouseover si ferma lo scorrimento, onmouseout lo si riprende.
• prevNext: (default false), inserisce i pulsanti avanti e indietro.
• controls: (default false), permette di utilizzare dei pulsanti per navigare più agevolmente tra le slide. E' necessario in questo caso mettere mano al codice html per inserire tanti link quante sono le slide totali in un div.controls.
• selectedClassName: (default 'selected'), opzione utilizzata quando è attiva l'opzione controls per evidenziare il bottone della slide corrente. 

Negli esempi ho utilizzato delle immagini, ma naturalmente è possibile inserire anche del testo o altro tipo di contenuto formattato. Ecco l'indirizzo degli esempi e  il codice sorgente di carosello.js.