Nous allons voir dans cette leçon comment faire pour créer un carrousel d’images avec Boostrap 5.
Un carrousel d’images permet d’afficher des images (ou autres éléments) et de les faire défiler automatiquement à la manière de diapositives.
Les classes pour créer un carrousel :
- carousel
- slide
- carousel-indicators
- carousel-item
- carousel-control-prev
Les attributs pour créer un carrousel :
- data-bs-ride
- data-bs-target
- data-bs-slide–to
- data-bs-interval
Création d’un carrousel d’image avec Bootstrap 5 étape par étape
1 : Création d’une division <div> qui va contenir notre carrousel.
Cette division doit contenir :
Les classes carousel et slide.
- La classe carousel indique que la division va contenir un carrousel.
- La classe slide ajoute un effet de transition lors du défilement des éléments. Si vous ne souhaitez créer une animation, vous pouvez omettre cette classe.
L’attribut data-bs-ride avec la valeur carousel pour indiquer a Bootstrap que nous souhaitons que l’animation commence dès le chargement de la page.
Un identifiant id pour identifier le carrousel, il est indispensable si vous souhaitez créer plusieurs carrousels sur une même page.
<div id= »carrousel1″ class= »carousel slide » data-bs-ride=« carousel« >
2 : création des indicateurs
En premier, on crée la division qui va contenir tous les boutons indicateurs situés en bas de chaque image, avec la classe carousel-indicators.
Ces boutons indicateurs vont servir à indiquer combien d’images il reste à afficher et quel est l’ordre d’apparition de l’image qui s’affiche.
3 : Création de la division qui va contenir toutes nos images.
Cette division doit inclure la classe carousel-inner
4 : Création d’une division <div> pour chacune des images contenues dans le carrousel.
On ajoute à cette division la classe carousel-item et la classe active sur la première des images.
Ps : La classe active est obligatoire pour faire apparaitre le carrousel.
5 : intégration des images du carrousel
A l’intérieur de chaque division contenant la classe carousel-item nous plaçons l’une des images que l’on veut afficher dans le carrousel.
Voir la leçon sur : comment gérer les images avec Bootstrap 5 ?
Sur chacune des balises <img> on ajoute les classe d.block et w-100 pour empêcher l’alignement par défaut des images.
Bien, on voit que notre carrousel commence à ressembler à quelque chose.
Mais améliorons-le en ajoutant des boutons précèdent-suivant pour faciliter la navigation.
4 : Création des boutons précédent-suivant.
Juste au-dessus de la balise </div> qui correspond a la balise qui englobe la totalité du carrousel …on crée les boutons précèdent et suivant.
Le bouton suivant devra comporter :
Pour créer le bouton suivant, on reprend le code ci-dessus et l’on change dans l’ordre d’apparition.
- La classe carousel-control-prev par la classe carousel-control-next.
- L’attribut data-bs-slide= »prev » par l’attribut data-bs-slide= »next« .
- La classe carousel-control-prev-icon par la classe carousel-control-next-icon.
Ce qui donne :
<button class= »carousel-control-next » type= »button » data-bs-target= »#carrousel1 » data-bs-slide= »next« >
<span class= »carousel-control-next-icon« ></span>
</button>
Le code complet avec l’intégration des boutons précèdent/suivant :
Changer le délai d’affichage entre chaque image
Il est possible de changer le délai d’affichage par défaut entre chaque image en rajoutant aux divisions contenant la classe carousel-item l’attribut data-bs-interval= »* » et lui donner une valeur en milliseconde.
Cette valeur peut être différente d’une image a l’autre.
Ajouter une légende au carrousel d’image avec Bootstrap 5
Pour ajouter une légende sous chaque image de notre carrousel on ajoute en dessous de chaque élément <img> une division <div> avec la classe carousel-caption.
Exemple :
<div class= »carousel-item active » data-bs-interval= »10000« >
<img src= »https://upload.wikimedia.org/wikipedia/commons/0/08/EmpireStateNewYokCity.jpg » alt= »new-york » class= »d-block w-100« >
<div class= »carousel-caption« >
<h5>New-york</h5>
</div>
</div>
Le code complet de notre carrousel avec l’ajout des légendes et les changements de délais d’affichage.
salut! le contenu est tres bien expliquer merci!
Dommage que le code ne soit pas copiable… ;-(