Ce tutoriel Bootstrap 5 vous présente le composant Carousel. Nous verrons qu’il est facile de mettre en place un diaporama pour faire défiler des photos.
Bienvenue dans cette vidéo où nous allons continuer notre formation Bootstrap en nous concentrant aujourd’hui sur le composant carousel. Comme d’habitude, j’ai créé un fichier nommé 18-composant-carousel.html. J’ai installé Bootstrap et ajouté la balise script nécessaire, car le carousel nécessite JavaScript pour fonctionner correctement. Nous allons commencer par créer une div de classe container et y intégrer notre carousel.
Structure de Base du Carousel
Nous créons une nouvelle div avec les classes carousel et slide. Ensuite, nous ajoutons une autre div avec la classe carousel-inner, qui sera le conteneur de nos éléments. Ces éléments contiendront les images.
Ajout des Éléments du Carousel
Nous ajoutons une div de classe carousel-item. À l’intérieur de cette div, nous insérons une image que je vais chercher dans mon dossier images.
Configuration de l’Image
Nous attribuons une classe à cette image pour qu’elle soit de type bloc et occupe 100% de son conteneur. Nous avons donc notre carousel avec une première div de classes carousel-slide, et une div intérieure de classe carousel-inner, qui contiendra plusieurs divs de classe carousel-item, chacune renfermant une image.
Multiplication des Éléments
Nous dupliquons la structure pour ajouter trois images différentes dans le carousel. Chaque div de classe carousel-item contiendra une image distincte.
Activation de l’Image Initiale
Pour l’instant, rien ne s’affiche car il faut indiquer quelle image sera active en ajoutant la classe active à l’une des images. Nous ajoutons cette classe à la première image.
Lecture Automatique du Carousel
Nous ajoutons l’attribut data-bs-ride= »carousel » à la div de classe carousel-slide pour activer le défilement automatique des images. Après enregistrement et actualisation, les images défilent automatiquement.
Ajout des Boutons de Navigation
Nous ajoutons des boutons pour naviguer à gauche et à droite des images. Ces boutons sont placés juste après la div de classe carousel-inner. Nous créons deux boutons, un pour précédent et un pour suivant, avec les classes correspondantes.
Configuration des Boutons
Pour chaque bouton, nous ajoutons une balise span contenant l’icône du bouton, avec des classes spécifiques pour les boutons précédent (carousel-control-prev) et suivant (carousel-control-next).
Référencement du Carousel par les Boutons
Nous ajoutons un id au carousel (diaporama) pour que les boutons puissent le référencer. Nous ajoutons également les attributs data-bs-target= »#diaporama » aux boutons pour les lier au carousel.
Fonctionnement des Boutons
Nous ajoutons les attributs data-bs-slide= »prev » pour le bouton précédent et data-bs-slide= »next » pour le bouton suivant. Après enregistrement et actualisation, les icônes apparaissent et les boutons fonctionnent correctement pour faire défiler les images.
Conseils et Documentation
Ce n’est pas très compliqué, il suffit de connaître la syntaxe. Je vous invite à consulter la documentation officielle de Bootstrap pour plus d’exemples et options comme les indicateurs de position et le texte additionnel. Je vous encourage à reproduire le code présenté et à explorer davantage par vous-même. À bientôt pour une prochaine vidéo.
