Exemples de carrousels

Les carrousels sont des composants clés de tout site web de vente.

On rencontre différents styles sur le web et Bootstrap permet d'en créer quelques uns.

La base du carrousel

Le carrousel est un diaporama qui permet de boucler sur une série de blocs de contenu, principalement images et texte. Il peut avoir différents temps de transition et offrir des contrôles et indicateurs pour passer au prochain bloc ou au précédent.

Le minimum nécessaire pour qu'un carrousel soit fonctionnel comprend :

• Un contenant parent

  • classe carousel pour déclarer un carrousel
  • classe slide active le défilement des diapositives

• Un contenant enfant

  • classe carousel-inner pour contenir la liste des diapositives de carrousel. Ceci représente le bloc des diapositives.

• Des blocs enfants au carousel-inner pour les diapositives

  • classe carousel-item pour un enfant
  • un des enfants doit obligatoirement avoir la classe active pour que le carrousel fonctionne; cela indique la première diapositive de départ

• Du contenu dans les enfants items de carrousel

Exemple de base sur une balise <header>:

<header id="carouselEnTete" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/forest1.jpg" alt="enchanted forest">
        </div>
        <div class="carousel-item">
            <img src="img/forest2.jpg" alt="enchanted forest">
        </div>
        <div class="carousel-item">
            <img src="img/forest3.jpg" alt="enchanted forest">
        </div>
    </div>
</header>

Les boutons suivant et précédent

Cela nécessite :

1. Le bloc parent du carrousel doit avoir un identifiant

   <header id="exempleCarousel" class="carousel slide">

2. Avant ou après le carrousel-inner, ajouter un bloc contenant deux boutons, un pour précédent, l'autre pour suivant :

   <!--Contrôles Précédent, Suivant-->
    <div>
     <button class="btn-icon btn-sm" type="button" data-bs-target="#exempleCarousel" data-bs-slide="prev">
       <span class="carousel-icon-prev" aria-hidden="true"></span>
     </button>
     <button class="btn-icon btn-sm" type="button" data-bs-target="#exempleCarousel" data-bs-slide="next">
       <span class="carousel-icon-next" aria-hidden="true"></span>
     </button>
   </div>
   

Chaque bouton doit avoir les informations suivantes :

• cibler le carrousel avec l'attribut data-bs-target et l'identifiant du carrousel
• un type button pour indiquer que la balise est utilisée comme bouton générique
• une propriété data-bs-slide avec soit la valeur prev ou next pour indiquer le sens du passage à la prochaine diapo
• Du contenu à mettre sur le bouton (l'icône de Bootstrap, du texte, une image)

Les indicateurs

Des indicateurs permettent de voir rapidement combien il y a de diapositives et laquelle est présentement active.

On crée des indicateurs à l'aide :

• d'un bloc englobant les indicateurs, avec la classe carousel-indicators

• un bouton par indicateur avec, pour chaque bouton :

  • le type button pour que Bootstrap s'en occupe aevc son script
  • le carrousel cible dans data-bs-target
  • la diapositive à atteindre lorsqu'on clique sur l'indicateur avec data-bs-slide-to
  • un des boutons doit avoir la classe active pour indiquer quelle diapo est affichée à l'ouverture

<!--Indicateurs du carrousel-->
<div class="carousel-indicators">
    <button type="button" data-bs-target="#exempleCarousel" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#exempleCarousel" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#exempleCarousel" data-bs-slide-to="2"></button>
</div>

Carrousel à plusieurs diapos visibles

Pour un carrousel qui permet de voir plusieurs éléments à la fois, on ajoute sur le parent un élément de style --bs-carousel-items.

On peut aussi ajouter --bs-carousel-items-gap pour créer un espace entre les éléments visibles.

<div id="carouselMultiple" class="carousel slide" style="--bs-carousel-items: 3; --bs-carousel-items-gap: 1rem;">
  <div class="carousel-inner">
    <div class="carousel-item active"></div>
    <div class="carousel-item"></div>
    <div class="carousel-item"></div>
    <div class="carousel-item"></div>
    <div class="carousel-item"></div>
    <div class="carousel-item"></div>
  </div>
</div>

Carrousel avec apperçu

Pour le carrousel avec apperçu, on utilise plutôt l'élément de style --bs-carousel-items-peek.

<div id="carouselPeek" class="carousel slide" data-bs-ends="stop" style="--bs-carousel-items-peek: 3rem; --bs-carousel-items-gap: 1rem;">
  <div class="carousel-inner">
    <div class="carousel-item active"></div>
    <div class="carousel-item"></div>
    <div class="carousel-item"></div>
    <div class="carousel-item"></div>
    <div class="carousel-item"></div>
  </div>
</div>