Créer un carrousel avec Bootstrap

Un carrousel est un diaporama, c’est-à-dire un composant qui permet de parcourir ou de « faire passer » différents éléments comme des images ou des textes. On va pouvoir créer des carrousels avec Bootstrap en utilisant le composant carrousel.

 

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.

Laisser un commentaire