Création d’un carrousel simple avec Bootstrap
Pour définir un carrousel avec Bootstrap, il suffit d’ajouter une classe .carousel
à un conteneur générique. On ajoutera ensuite également une classe .slide
pour donner un effet de transition de type slide entre nos différentes diapositives.
Pour ajouter des diapositives à notre carrousel, nous allons avoir besoin d’une classe .carousel-inner
qu’on va ajouter à un deuxième élément conteneur qui va englober toutes nos diapositives et d’une classe .carousel-item
pour chacune des diapositives du carrousel.
On va ainsi pouvoir par exemple créer un carrousel basique qui va faire tourner trois images en boucle. Notez qu’une classe .active
doit obligatoirement être ajoutée à l'une des diapositives pour que le carrousel soit visible.
Code :
See the Pen
Bootstrap 6.4.1 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 6.4.1 by Pierre (@pierregiraud)
on CodePen.
Ajouter des contrôles, indicateurs et légende à notre carrousel
Nous allons également pouvoir ajouter des contrôles facultatifs (flèches précédent / suivant) ainsi que des indicateurs (numéro de la slide actuellement présentée) à notre carrousel.
Les éléments de contrôle et indicateurs doivent avoir un attribut data-target
(ou href
pour les liens) correspondant à l'id
de l'élément .carousel
.
Notez que l’attribut id
est particulièrement utile dans le cas où une page possède plusieurs carrousels puisque cela nous permet d’identifier précisément chaque carrousel.
On ajoutera des contrôles grâce aux classes .carousel-control-next
et .carousel-control-prev
.
On ajoutera des indicateurs (numéro de la slide actuellement présentée) au carrousel avec la classe .carousel-indicators
.
On peut également ajouter des sous-titres à chaque élément du carrousel avec la classe .carousel-caption
.
Code :
See the Pen
Bootstrap 6.4.2 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 6.4.2 by Pierre (@pierregiraud)
on CodePen.
Changer le type d’animation et la vitesse de passage des diapositives du carrousel
Pour changer le type d’animation du carrousel et passer d’une diapositives à l’autre avec un effet de fondu plutôt qu’un effet de slide on va pouvoir rajouter une classe .carousel-fade
à l’élément possédant la classe .carousel
.
Pour modifier le temps d’affichage d’une diapositive, c’est-à-dire la durée avant le passage à la diapositive suivante, nous allons pouvoir utiliser un attribut data-interval
. On va lui passer une valeur en millisecondes.
Code :
See the Pen
Bootstrap 6.4.3 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 6.4.3 by Pierre (@pierregiraud)
on CodePen.