TP les carrousels Bootstrap

Objectifs

• Etre capable de travailler avec carrousel en Bootstrap 4

Exercice 01

1. Énoncé

   1. Créer un carrousel composé d’un diaporama (slideshow) de 6 images qui vont défiler les uns après les autres, automatiquement.
   2. 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.
   3. Les images doivent mesurer 800x400 (vous pouvez télécharger les images depuis: https://placeimg.com/800/400/animals )
   4. Identifier chaque élément du carrousel avec l’attribut data-target="#TPCarousel"
   5. L’ordre des éléments avec l’attribut data-slide-to="0/1/2/…/5 ", le premier élément aura la classe .active
   6. 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.
   7. Changer la couleur des indicateurs.
   8. défiler les images toute les secondes (1000).
   9. Essayer d'afficher le carrousel en plein écran
   10. Créer un effet fondu (fade) au changement des images.

2. Solution

   • Essayez de faire l'exercice de votre côté avant de regarder la solution !

Exercice 02

1. É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