Comment créer un carrousel / diaporama en bootstrap 5

Carrousel est une présentation dynamique du contenu où les textes et les images sont combinés pour rendre les choses visibles et accessibles pour l'utilisateur en les faisant du vélo encore et encore.Le carrousel est utilisé pour présenter l'activité récente ou exclusive sur un site Web et faciliter l'exploration de l'utilisateur sans aucun problème.

Cet article est à propos de

• Créer un carrousel
• Carrousel avec légende
• Processus étape par étape de la création d'un carrousel

Comment créer un carrousel

Pour créer une utilisation de carrousel .carrousel classe avec data-bs-ride = "Carrousel" attribut, puis enroulez-le autour des divs avec des classes .carrousel Pour ajouter des boutons de navigation, .carrousel Pour ajouter des images de carrousel, .carrousel-témoignage Pour ajouter le bouton de diapositive précédent, .carrousel-control-next ajouter
bouton de diapositive suivante.

Code

Étape 1

Ajouter .carrousel classe pour créer Créer un carrousel

Code

Dans le code ci-dessus, .carrousel La classe est utilisée pour ajouter des diapositives à un carrousel et pour ajouter du contenu à chaque utilisation de diapositive .carrousel-item classe. Pour l'effet de transition et d'animation CSS lors du passage d'une diapositive à une autre, ajouter .glisser classe.

Étape 2

Ajouter .carrousel classe pour ajouter des boutons dans le carrousel:

C'est ainsi que vous créez des indicateurs de carrousel.

Étape 3

Ajouter .carrousel-témoignage et .carrousel-témoignage-prév-icon ensemble pour créer et utiliser un bouton précédent pour revenir à la diapositive précédente.

Ajouter .carrousel-control-next et .carrousel-control-next-icon ensemble pour créer et utiliser un bouton suivant pour passer à la diapositive suivante.

C'est ainsi que le carrousel suivant et les boutons de diapositive précédents sont créés.

Comment créer un carrousel avec une légende

Pour ajouter une légende à une diapositive, ajoutez un div avec une classe .carrousel À l'intérieur de la div avec une classe .carrousel-item.

Code

Première diapositive

Ceci est la première diapositive avec la légende

De cette façon, vous pouvez ajouter des légendes à votre carrousel.

Conclusion

Pour créer une utilisation de carrousel .carrousel classe avec data-bs-ride = "Carrousel" attribut, puis enroulez-le autour des divs avec des classes .carrousel Pour ajouter des boutons de navigation, .carrousel Pour ajouter des images de carrousel, .carrousel-témoignage Pour ajouter le bouton de diapositive précédent, .carrousel-control-next ajouter
bouton de diapositive suivante. Dans l'article ci-dessus, le processus de création d'un carrousel est expliqué avec des exemples pour vous faciliter la compréhension et la création de votre propre carrousel.