twitter-bootstrap
caroselli
Ricerca…
Osservazioni
Per ulteriori informazioni, visitare la documentazione ufficiale all'indirizzo http://getbootstrap.com/javascript/#carousel , da cui derivano gli esempi e le informazioni di utilizzo HTML e Javascript di base.
Va notato che i caroselli non funzionano correttamente in IE 9 e precedenti a causa dell'uso di transizioni / animazioni CSS3.
Utilizzo HTML di base
Un carosello Bootstrap è un componente Bootstrap che crea una presentazione che scorre attraverso gli elementi all'interno del carosello.
Ecco un esempio di utilizzo HTML di base:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Utilizzo e inizializzazione di Javascript di base
I componenti del carosello possono essere istanziati tramite jQuery con la funzione $('.carousel').carousel(options)
, dove $('.carousel')
è un riferimento di livello superiore al carosello specifico e le options
è un oggetto Javascript che specifica il carosello attributi predefiniti.
L'oggetto options
consente di definire più proprietà che influiscono sul comportamento del carosello. Queste proprietà sono definite come tali:
- La proprietà
interval
accetta un tipo dinumber
Javascript che consente a un utente di definire la quantità di tempo per cui il carosello visualizza una data diapositiva del carosello. Se viene specificato il valore booleanofalse
, il carosello non ciclerà automaticamente. - La proprietà
pause
accetta un tipo distring
Javascript che attiva o disattiva il comportamento in cui il ciclo automatico del carousel viene sospeso quando il mouse dell'utente entra nel carosello. Il valore predefinito (e solo) accettato è "hover". - La proprietà
wrap
accetta un tipoboolean
Javascript che consente a un utente di definire se desidera che il carosello esegua un ciclo continuo senza fermarsi su una determinata diapositiva. - La proprietà della
keyboard
accetta un tipoboolean
Javascript che consente a un utente di definire se desidera che il carosello risponda agli eventi della tastiera.
Ecco un esempio dell'utilizzo Javascript di base:
$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });
Come con altri componenti Bootstrap, le opzioni del carousel possono anche essere specificate in HTML tramite attributi di dati.