Carrousels

Les carrousels, également appelés curseurs 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 afficher des produits, des éléments de portfolio ou du contenu en vedette.

Caractéristiques Clés

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

Classes d'Utilisation

• carousel: Cette classe est appliquée à 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 est appliquée aux diapositives individuelles à l'intérieur du carrousel. Chaque carousel-item représente une diapositive dans le carrousel;
• active: Cette classe marque une diapositive comme active ou la diapositive actuellement affichée. Elle garantit que la diapositive correspondante est visible lorsque le carrousel est rendu;
• carousel-control-prev et carousel-control-next: Ces classes sont appliquées aux boutons de navigation précédent et suivant. Elles fournissent des contrôles pour que les utilisateurs puissent 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 est appliquée à 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 au survol ou au focus.