Il plugin Carousel
Il plugin Carousel è un componente per il ciclismo attraverso gli elementi, come una giostra (presentazione).
Tip: I plugin possono essere inclusi singolarmente (utilizzando Bootstrap's individuali "carousel.js" di file), o tutti in una volta (usando "bootstrap.js" o "bootstrap.min.js" ).
Carousel Esempio
Chania
L'atmosfera a Chania ha un tocco di Firenze e Venezia.
Chania
L'atmosfera a Chania ha un tocco di Firenze e Venezia.
Fiori
fiori Beatiful a Kolymbari, Creta.
Fiori
fiori Beatiful a Kolymbari, Creta.
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).
Come creare un carosello
L'esempio seguente mostra come creare un carosello di base:
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>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</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 " esempio spiegato
Il più esterno <div> :
Caroselli richiedono l'uso di un id (in questo caso id="myCarousel" ) per i controlli carosello per funzionare correttamente.
La class="carousel" specifica che questo <div> contiene una giostra.
Il .slide classe aggiunge un effetto di transizione CSS e di animazione, che rende gli oggetti scivolano quando mostra un nuovo elemento. Omettere questa classe se non si desidera che questo effetto.
Il data-ride="carousel" attributo dice Bootstrap per iniziare animare la giostra immediatamente quando il caricamento della pagina.
La parte "Indicatori":
Gli indicatori sono i puntini nella parte inferiore di ciascuna slitta (che indica quante diapositive c'è nel carosello, e che scorrono l'utente attualmente visualizzazione).
Gli indicatori sono specificati in una lista ordinata con classe .carousel-indicators .
Il data-target attributo indica l'id della giostra.
Il data-slide-to attributo specifica che scorrono per andare, quando si fa clic sul punto specifico.
Il "wrapper per diapositive" parte:
Le diapositive sono specificati in un <div> con classe .carousel-inner .
Il contenuto di ogni diapositiva è definito in un <div> con classe .item . Questo può essere di testo o immagini.
Il .active classe deve essere aggiunto a una delle diapositive. Altrimenti, la giostra non sarà visibile.
La parte "controlli a destra ea sinistra":
Questo codice aggiunge i pulsanti "destra" che permette all'utente di andare avanti e indietro tra le diapositive manualmente "sinistra" e.
Il data-slide attributo accetta la parole chiave "prev" o "next" , che altera la posizione della slitta rispetto alla sua posizione attuale.
Aggiungere 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 " Completare Bootstrap carosello di riferimento
Per un riferimento completo di tutte le opzioni carosello, metodi ed eventi, vai alla nostra Bootstrap JS carosello di riferimento .