JS Carousel (carousel.js)
Il plugin Carousel è un componente per il ciclismo attraverso gli elementi, come una giostra (presentazione).
Per un tutorial su caroselli, leggere la nostra Bootstrap Carousel tutorial .
Nota: caroselli non sono supportate correttamente in Internet Explorer 9 e versioni precedenti (perché usano le transizioni CSS3 e animazioni per ottenere l'effetto di scorrimento).
Le Classi Carousel Plugin
| Classe | Descrizione |
|---|---|
| .carousel | Crea una giostra |
| .slide | Aggiunge una transizione CSS e effetto di animazione quando si fa scorrere da una voce all'altra. Rimuovere questa classe se non si desidera che questo effetto |
| .carousel-indicators | Aggiunge indicatori per la giostra. Questi sono i piccoli puntini nella parte inferiore di ogni diapositiva (che indica il numero di diapositive ci sono nel carosello, e che scorrono l'utente state consultando attualmente) |
| .carousel-inner | Aggiunge diapositive al carosello |
| .item | Specifica il contenuto di ogni diapositiva |
| .left carousel-control | Aggiunge un pulsante di sinistra alla giostra, che permette all'utente di tornare indietro tra le diapositive |
| .right carousel-control | Aggiunge un pulsante di destra per la giostra, che permette all'utente di andare avanti tra le diapositive |
| .carousel-caption | Specifica una didascalia per il carosello |
Via data-* Attributi
Il data-ride="carousel" attributo attiva la giostra.
Il data-slide e data-slide-to attributi specifica che scorrono per andare.
Il data-slide attributo accetta due valori: prev o successivo, mentre data-slide-to accettare numeri.
Esempio
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
Prova tu stesso " Via JavaScript
Attivare manualmente con:
Esempio
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Prova tu stesso " Opzioni Carousel
Le opzioni possono essere passati attraverso gli attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome opzione per data-, come nel data-interval = "".
| Nome | Digitare | Predefinito | Descrizione | Provalo |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Specifica il ritardo (in millisecondi) tra ogni diapositiva. Nota: impostare l'intervallo su false per fermare le voci di scivolare automaticamente | Utilizzando JS Utilizzando i dati |
| pause | string, or the boolean false | "hover" | Sospende la giostra da passare attraverso la diapositiva successiva quando il puntatore del mouse entra la giostra, e riprende lo scorrimento quando il puntatore del mouse lascia la giostra Nota: impostare la pausa a false per fermare la capacità di mettere in pausa al passaggio del mouse | Utilizzando JS Utilizzando i dati |
| wrap | boolean | true | Specifica se la giostra deve passare attraverso tutte le diapositive di continuo, o fermarsi al l'ultima diapositiva
| Utilizzando JS Utilizzando i dati |
Metodi Carousel
La seguente tabella elenca i metodi carosello tutti disponibili.
| metodo | Descrizione | Provalo |
|---|---|---|
| .carousel( options ) | Attiva la giostra con un'opzione. Vedere opzioni di cui sopra per i valori validi | Provalo |
| .carousel("cycle") | Passa attraverso gli elementi giostra da sinistra a destra | Provalo |
| .carousel("pause") | Interrompe la giostra da passare attraverso articoli | Provalo |
| .carousel(number) | Va a un elemento specificato (zero-based: prima voce è 0, seconda voce è 1, ecc ..) | Provalo |
| .carousel("prev") | Va alla voce precedente | Provalo |
| .carousel("next") | Va alla voce successiva | Provalo |
Eventi Carousel
La seguente tabella elenca gli eventi carosello tutti a disposizione.
| Evento | Descrizione | Provalo |
|---|---|---|
| slide.bs.carousel | Si verifica quando la giostra è in procinto di far scorrere da una voce all'altra | Provalo |
| slid.bs.carousel | Si verifica quando la giostra ha finito di scorrere da una voce all'altra | Provalo |
Esempi
Didascalie alle diapositive
Aggiungere <div class="carousel-caption"> all'interno di ogni <div class="item"> per creare una didascalia per ogni diapositiva:
Esempio
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Prova tu stesso "