Questo plugin Bootstrap permette di creare una sequenza di immagini o altri elementi a scorrimento.
Definire la struttura del Carousel
La realizzazione di un carousel richiede diversi elementi. Innanzi tutto, è necessario un <div> che funga da contenitore di tutti gli elementi del carousel e che deve avere le classi carousel e slide.
<div id="mioCarousel" class="carousel slide">
//contenuto del carousel
</div>All’interno del div vanno poi creati tre blocchi. Ne vedremo uno alla volta.
Indicatori
Una lista di elementi vuoti che costituiranno gli indicatori che segnalano all’utente quanti sono gli elementi del carosuel e qual’è quello attualmente visualizzato.
<ol class="carousel-indicators">
<li data-target="#mioCarousel" data-slide-to="0" class="active"></li>
<li data-target="#mioCarousel" data-slide-to="1"></li>
<li data-target="#mioCarousel" data-slide-to="2"></li>
</ol>
Ovviamente, gli elementi devono essere in numero uguale alle "schermate" da mostrare nel carousel e devono contenere l’attributo data-target il cui valore deve corrispondere all’ID del <div> contenitore del carousel.
Schermate/slide del carousel
Bisogna poi creare un div di classe carousel-inner che conterrà una serie di div di classe item ognuno dei quali contiene ciò che deve essere mostrato in ogni schermata/slide del nostro carousel. La prima schermata mostrata avrà anche la classe active che poi sarà assegnata dal plugin alle successive schermate, man mano che vengono mostrate.
<div class="carousel-inner">
<div class="item active">
<img src="img/foto1.JPG" alt="...">
</div>
<div class="item">
<img src="img/foto2.JPG" alt="...">
</div>
<div class="item">
<img src="img/foto3.JPG" alt="...">
</div>
</div>In ogni scheda può essere creato un titolo che viene mostrato appena sopra agli indicatori. Il titolo viene realizzato con un div di classe carousel-caption. In questo div sono inseriti i tag necessari a creare il titolo (ad esempio un H£ ed un paragrafo).
<div class="item active">
<img src="img/foto 1.JPG" alt="...">
<div class="carousel-caption">
<h3>Primo passaggio</h3>
<p>i materiali necessari</p>
</div>
</div>
Frecce avanti/indietro
Per concludere la creazione del nostro Carousel, occorre creare le frecce laterali (una a destra ed una a sinistra) che permettono all’utente di spostarsi da una schermata all’altra senza attendere lo scorrimento automatico del carousel: si tratta dei classici comandi Prev e Next. Questi elementi di navigazione vengono realizzati mediante dei tag <a> cui viene assegnata la classe carousel-control in aggiunta alla classe left o right. E’ inoltre necessario assegnare all’attributo href di queste due ancore l’ID del div contenitore del carousel.
Vediamo il codice:
<a class="left carousel-control" href="#mioCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#mioCarousel" data-slide="next">
<span class="icon-next"></span>
</a>Gestire la larghezza del Carousel
Per impostazione predefinita un carousel è largo quanto il suo elemento genitore e se le schede che lo costituiscono sono più piccole rimane diverso spazio intorno ad esse. Tra l’altro, questo spazio si dispone sul lato destro a meno che non si centri il div che costituisce la scheda.
Per ridurre le dimensioni del carousel, basta creare una regola CSS (che andremo ad inserire nel nostro foglio di stile) per l’elemento div che racchiude tutti gli elementi del carousel. Ad esempio:
<style>
.carousel {
width:300px;
}
</style>Opzioni del Carousel
Il comportamento del carousel può essere influenzato dall’uso di opzioni passate attraverso una serie di attributi di tipo data-* oppure mediante codice JavaScript. Più sotto vedremo come effettuare la configurazione del Carousel in entrambi i modi.
La tabella che segue riepiloga le opzioi disponibili, i loro valori predefiniti e il loro significato.
| Nome | Tipo | Valore predefinito | Descrizione |
|---|---|---|---|
| interval | numero o booleano | 5000 | Indica il tempo in millisecondi trascorso il quale viene visualizzata una nuova schermata. Se assume il valore false il carousel non avanza automaticamente, ma solo tramite le apposite frecce. |
| pause | stringa | "hover" | Se si configura questa opzione, l’avanzamento del carousel si ferma quando il mouse passa su di esso, riprende quando esce. |
| wrap | booleano | true | Indica se il carousel riprende dall’inizio l’avanzamento dopo aver visualizzato tutte le schede. Se assume il valore false, il carousel si interrompe quando raggiunge l’ultima scheda. |
Ecco un esempio di utilizzo di queste opzioni mediante attributi data-*:
<div id="mioCarousel" class="carousel slide" data-interval="1000"
data-pause="hover" data-wrap="false">Gestire il carousel via JavaScript
Come detto è possibile gestire le varie opzioni attraverso Javascript. Ad esempio, le opzioni di cui abbiamo parlato sopra, possono essere configurate anche come segue:
$('#mioCarousel').carousel({
interval: 1000,
pause: "hover",
wrap: false
});Esistono poi vari metodi con i quali si può agire sul carousel:
- .carousel(‘cycle’): esegue un ciclo fra gli elementi del carousel da sinistra a destra;
- .carousel(‘pause’): mette in pausa l’avanzamento del carousel;
- .carousel(number): sposta l’esecuzione del carousel ad una specifica scheda. La prima scheda ha indice 0;
- .carousel(‘prev’): sposta l’esecuzione del carousel alla scheda precedente;
- .carousel(‘next’): sposta l’esecuzione del carousel alla scheda successiva;
Eventi
Come gli altri oggetti analizzati nelle lezioni precedenti anche il carousel genera degli eventi che possono essere utilizzati per eseguire altre azioni:
- slide.bs.carousel: l’evento si verifica non appena si comincia a mostrare una nuova scheda;
- slid.bs.carousel: l’evento si verifica non appena una nuova scheda è mostrata per intero.
La sintassi per utilizzare questi metodi è la seguente
$('#mioCarousel').on('slide.bs.carousel', function() {
//azioni da eseguire
});