Le Plugin Carousel
Le plugin Carousel est un composant pour le cyclisme à travers des éléments, comme un carrousel (diaporama).
Astuce: Plugins peuvent être inclus individuellement ( à l' aide Bootstrap's individuels "carousel.js" fichiers), ou tout à la fois ( en utilisant "bootstrap.js" ou "bootstrap.min.js" ).
Carousel Exemple
Chania
L'atmosphère à Chania a une touche de Florence et Venise.
Chania
L'atmosphère à Chania a une touche de Florence et Venise.
Fleurs
fleurs Beatiful à Kolymbari, Crète.
Fleurs
fleurs Beatiful à Kolymbari, Crète.
Note: Carrousels ne sont pas pris en charge correctement dans Internet Explorer 9 et plus tôt (car ils utilisent des transitions et des animations CSS3 pour obtenir l'effet de glissement).
Comment faire pour créer un carrousel
L'exemple suivant montre comment créer un carrousel de base:
Exemple
<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>
Essayez - le vous - même » Exemple Explained
Le plus à l' extérieur <div> :
Carrousels nécessitent l'utilisation d'un identifiant (dans ce cas id="myCarousel" ) pour les contrôles de carrousel pour fonctionner correctement.
La class="carousel" précise que ce <div> contient un carrousel.
La .slide classe ajoute une transition CSS et l' animation effet, ce qui rend les articles glissent lors de l' affichage d' un nouvel élément. Omettre cette classe si vous ne voulez pas cet effet.
Les data-ride="carousel" attribut indique Bootstrap pour commencer l' animation du carrousel immédiatement quand la page se charge.
La partie «Indicateurs»:
Les indicateurs sont les petits points en bas de chaque diapositive (qui indique le nombre de diapositives, il est dans le carrousel, et qui coulissent l'utilisateur sont en train de regarder).
Les indicateurs sont spécifiés dans une liste ordonnée avec classe .carousel-indicators .
Les data-target attribut pointe vers l'id du carrousel.
Les data-slide-to spécifié par l' attribut qui coulissent pour aller, en cliquant sur le point spécifique.
Le "Wrapper pour les diapositives" partie:
Les lames sont spécifiées dans un <div> avec la classe .carousel-inner .
Le contenu de chaque diapositive est défini dans un <div> avec la classe .item . Cela peut être du texte ou des images.
La .active classe doit être ajoutée à l' une des glissières. Dans le cas contraire, le carrousel ne sera pas visible.
La partie "gauche et les commandes de droite":
Ce code ajoute des boutons «droit» qui permet à l'utilisateur d'aller et venir entre les diapositives manuellement "gauche" et.
Les data-slide attribut accepte les mots - clés "prev" ou "next" , qui modifie la position coulissant par rapport à sa position actuelle.
Ajouter des légendes aux diapositives
Ajouter <div class="carousel-caption"> dans chaque <div class="item"> pour créer une légende pour chaque diapositive:
Exemple
<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>
Essayez - le vous - même » Remplissez Bootstrap Carousel Référence
Pour une référence complète de toutes les options carrousel, méthodes et événements, rendez - vous à notre Bootstrap JS Carousel Référence .