JS Carousel (carousel.js)
Le plugin Carousel est un composant pour le cyclisme à travers des éléments, comme un carrousel (diaporama).
Pour un tutoriel sur Carrousels, lisez notre Bootstrap Tutorial Carousel .
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).
Les classes Carousel Plugin
| Classe | La description |
|---|---|
| .carousel | Crée un carrousel |
| .slide | Ajoute une transition CSS et l'effet d'animation en glissant d'un élément à l'autre. Supprimer cette classe si vous ne voulez pas cet effet |
| .carousel-indicators | Ajoute des indicateurs pour le carrousel. Ce sont les petits points en bas de chaque diapositive (qui indique le nombre de diapositives, il y a dans le carrousel, et qui glissent l'utilisateur sont en train de regarder) |
| .carousel-inner | Ajoute des diapositives sur le carrousel |
| .item | Indique le contenu de chaque diapositive |
| .left carousel-control | Ajoute un bouton gauche pour le carrousel, ce qui permet à l'utilisateur de revenir entre les diapositives |
| .right carousel-control | Ajoute un bouton à droite du carrousel, ce qui permet à l'utilisateur d'aller de l'avant entre les diapositives |
| .carousel-caption | Indique une légende pour le carrousel |
Via data-* Attributs
Les data-ride="carousel" attribut active le carrousel.
Le data-slide et des data-slide-to attributs spécifie qui coulissent pour aller à.
Les data-slide attribut accepte deux valeurs: prev ou suivant, tandis que les data-slide-to accepter les numéros.
Exemple
<!--
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">
Essayez - le vous - même » Via JavaScript
Activer manuellement:
Exemple
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Essayez - le vous - même » options de Carousel
Les options peuvent être transmises par l'intermédiaire des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option pour de données, comme dans les données-interval = "".
| prénom | Type | Défaut | La description | Essayez-le |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Indique le délai (en millisecondes) entre chaque diapositive. Remarque: Réglez l' intervalle à false pour empêcher les articles de glisser automatiquement | Utilisation de JS Utilisation des données |
| pause | string, or the boolean false | "hover" | Suspend le carrousel de passer par la diapositive suivante lorsque le pointeur de la souris entre dans le carrousel, et reprend le glissement lorsque le pointeur de la souris quitte le carrousel Remarque: Réglez pause à false pour arrêter la possibilité de faire une pause sur le vol stationnaire | Utilisation de JS Utilisation des données |
| wrap | boolean | true | Indique si le carrousel doit passer par toutes les diapositives en continu, ou arrêter à la dernière diapositive
| Utilisation de JS Utilisation des données |
Méthodes Carousel
Le tableau suivant répertorie les méthodes de carrousel tous disponibles.
| méthode | La description | Essayez-le |
|---|---|---|
| .carousel( options ) | Active le carrousel avec une option. Voir options ci-dessus pour les valeurs valides | Essayez - le |
| .carousel("cycle") | Passe par les éléments du carrousel de gauche à droite | Essayez - le |
| .carousel("pause") | Arrête le carrousel de passer par les éléments | Essayez - le |
| .carousel(number) | Va à un élément spécifié (base zéro: premier élément est 0, deuxième point est de 1, etc ..) | Essayez - le |
| .carousel("prev") | Va à l'élément précédent | Essayez - le |
| .carousel("next") | Passe à l'élément suivant | Essayez - le |
Événements Carousel
Le tableau suivant répertorie les événements de carrousel tous disponibles.
| un événement | La description | Essayez-le |
|---|---|---|
| slide.bs.carousel | Se produit lorsque le carrousel est sur le point de glisser d'un élément à un autre | Essayez - le |
| slid.bs.carousel | Se produit lorsque le carrousel a fini de glissement d'un élément à un autre | Essayez - le |
Exemples
Captions à 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 »