TP les carrousels Bootstrap
TP les carrousels Bootstrap
-
Objectifs
- Etre capable de travailler avec carrousel en Bootstrap 4
-
Exercice 01
-
Énoncé
- Créer un carrousel composé d’un diaporama (slideshow) de 6 images qui vont défiler les uns après les autres, automatiquement.
- Les images peuvent être défilé manuellement grâce aux flèches "previous" (précédent) et "next" (suivant) ou grâce à des indicateurs situés en bas du carrousel.
- Les images doivent mesurer 800×400 (vous pouvez télécharger les images depuis: https://placeimg.com/800/400/animals )
- Identifier chaque élément du carrousel avec l’attribut
data-target="#TPCarousel" - L’ordre des éléments avec l’attribut
data-slide-to="0/1/2/…/5 ", le premier élément aura la classe.active - Créer des indicateurs qui se placeront des deux côtés de l’image (utiliser des flèches) pour revenir manuellement à l’image précédente ou pour avancer vers l’image suivante.
- Changer la couleur des indicateurs.
- défiler les images toute les secondes (1000).
- Essayer d’afficher le carrousel en plein écran
- Créer un effet fondu (fade) au changement des images.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la solution !
-
Exercice 02
-
Énoncé
- Créer un carrousel et changer le type d’animation du carrousel et passer d’une diapositives à l’autre avec un effet de fondu plutôt qu’un effet de slide.
- Modifier le temps d’affichage d’une diapositive, c’est-à-dire la durée avant le passage à la diapositive suivante (1000).
- Ajouter des contrôles (flèches précédent / suivant) au carrousel avec une couleur rouge
- Le carrousel se compose de 13 diapositives (images) de même dimension
- Éliminer les indicateurs du carrousel
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la solution !
