Bootstrap 5 : Créer un carrousel d’images

Bootstrap 5 : Créer un carrousel d'images

Nous allons voir dans cette leçon comment faire pour créer un carrousel d’images avec Boostrap 5.

Un carrousel d’images permet d’afficher des images (ou autres éléments) et de les faire défiler automatiquement à la manière de diapositives.

Table des matieres

Les classes pour créer un carrousel :

  • carousel
  • slide
  • carousel-indicators
  • carousel-item
  • carousel-control-prev

Les attributs pour créer un carrousel :

  • data-bs-ride
  • data-bs-target
  • data-bs-slideto
  • data-bs-interval

Création d’un carrousel d’image avec Bootstrap 5 étape par étape

1 : Création d’une division <div> qui va contenir notre carrousel.

Cette division doit contenir :

Les classes carousel et slide.

  • La classe carousel indique que la division va contenir un carrousel.
  • La classe slide ajoute un effet de transition lors du défilement des éléments. Si vous ne souhaitez créer une animation, vous pouvez omettre cette classe.

L’attribut data-bs-ride avec la valeur carousel pour indiquer a Bootstrap que nous souhaitons que l’animation commence dès le chargement de la page.

Un identifiant id pour identifier le carrousel, il est indispensable si vous souhaitez créer plusieurs carrousels sur une même page.

<div id=”carrousel1″ class=”carousel slidedata-bs-ride=carousel“>

2 : création des indicateurs

En premier, on crée la division qui va contenir tous les boutons indicateurs situés en bas de chaque image, avec la classe carousel-indicators.

Ces boutons indicateurs vont servir à indiquer combien d’images il reste à afficher et quel est l’ordre d’apparition de l’image qui s’affiche.

Création d’un carrousel d’image avec Bootstrap 5 étape par étape

3 : Création de la division qui va contenir toutes nos images.

Cette division doit inclure la classe carousel-inner

Création d’un carrousel d’image avec Bootstrap 5 étape par étape

4 : Création d’une division <div> pour chacune des images contenues dans le carrousel.

On ajoute à cette division la classe carousel-item et la classe active sur la première des images.

Ps : La classe active est obligatoire pour faire apparaitre le carrousel.

Création d’un carrousel d’image avec Bootstrap 5 étape par étape

5 : intégration des images du carrousel

A l’intérieur de chaque division contenant la classe carousel-item nous plaçons l’une des images que l’on veut afficher dans le carrousel.

Voir la leçon sur : comment gérer les images avec Bootstrap 5 ?

Sur chacune des balises <img> on ajoute les classe d.block et w-100 pour empêcher l’alignement par défaut des images.

Création d’un carrousel d’image avec Bootstrap 5 étape par étape
Création d’un carrousel d’image avec Bootstrap 5 étape par étape

Bien, on voit que notre carrousel commence à ressembler à quelque chose.

Mais améliorons-le en ajoutant des boutons précèdent-suivant pour faciliter la navigation.

4 : Création des boutons précédent-suivant.

Juste au-dessus de la balise </div> qui correspond a la balise qui englobe la totalité du carrousel …on crée les boutons précèdent et suivant.

Le bouton suivant devra comporter :

Pour créer le bouton suivant, on reprend le code ci-dessus et l’on change dans l’ordre d’apparition.

  • La classe carousel-control-prev par la classe carousel-control-next.
  • L’attribut data-bs-slide=”prev” par l’attribut data-bs-slide=”next.
  • La classe carousel-control-prev-icon par la classe carousel-control-next-icon.

Ce qui donne :

<button class=”carousel-control-next” type=”button” data-bs-target=”#carrousel1data-bs-slide=”next“>
    <span class=”carousel-control-next-icon“></span>
</button>

Le code complet avec l’intégration des boutons précèdent/suivant :

Création d’un carrousel d’image avec Bootstrap 5 étape par étape
Création d’un carrousel d’image avec Bootstrap 5 étape par étape

Changer le délai d’affichage entre chaque image

Il est possible de changer le délai d’affichage par défaut entre chaque image en rajoutant aux divisions contenant la classe carousel-item l’attribut data-bs-interval=”*” et lui donner une valeur en milliseconde.

Cette valeur peut être différente d’une image a l’autre.

Ajouter une légende au carrousel d’image avec Bootstrap 5

Pour ajouter une légende sous chaque image de notre carrousel on ajoute en dessous de chaque élément <img> une division <div> avec la classe carousel-caption.

Exemple :

<div class=”carousel-item activedata-bs-interval=”10000>
   <img src=”https://upload.wikimedia.org/wikipedia/commons/0/08/EmpireStateNewYokCity.jpg” alt=”new-york” class=”d-block w-100>
   <div class=”carousel-caption“>
       <h5>New-york</h5>
   </div>
</div>

Le code complet de notre carrousel avec l’ajout des légendes et les changements de délais d’affichage.

Création d’un carrousel d’image avec Bootstrap 5 étape par étape
Création d’un carrousel d’image avec Bootstrap 5 étape par étape
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0