Les carrousels, également appelés diaporamas d’images, sont des éléments interactifs utilisés pour afficher une série d’images ou d’éléments de contenu en rotation. Ils sont fréquemment utilisés pour présenter des produits, des éléments de portfolio ou du contenu mis en avant.

Fonctionnalités principales

Le composant carrousel de Bootstrap est un outil puissant pour créer des expériences utilisateur attrayantes. Il propose un défilement automatique, des contrôles de navigation et des options de personnalisation pour les effets de transition, la temporisation et les indicateurs.

Classes d’utilisation

• carousel : Cette classe s’applique à l’élément conteneur du carrousel ;
• carousel-inner : Cette classe s’applique à un élément <div> à l’intérieur du conteneur. Elle englobe tous les éléments du carrousel (diapositives) et définit le contenu interne du carrousel ;
• carousel-item : Cette classe s’applique à chaque diapositive individuelle du carrousel. Chaque carousel-item représente une diapositive du carrousel ;
• active : Cette classe marque une diapositive comme active ou actuellement affichée. Elle garantit que la diapositive correspondante est visible lors du rendu du carrousel ;
• carousel-control-prev et carousel-control-next : Ces classes s’appliquent aux boutons de navigation précédent et suivant. Elles fournissent des contrôles permettant à l’utilisateur de naviguer manuellement dans le carrousel ;
• data-bs-target et data-bs-slide : Ces attributs sont utilisés avec les boutons de navigation pour spécifier le carrousel cible et la direction des transitions de diapositives ;
• carousel-indicators : Cette classe s’applique à une liste d’éléments indicateurs (généralement des éléments <li>) représentant chaque diapositive du carrousel ;
• data-bs-interval et data-bs-pause : Ces attributs configurent l’intervalle (en millisecondes) entre les transitions de diapositives et spécifient si le carrousel doit se mettre en pause lors d’un survol ou d’un focus.