Carrousel
Composant de défilement de contenu (images, cartes, diapositives). Supporte la navigation au clavier, le balayage tactile et la lecture automatique.
Carrousel de base
<div class="bj-carousel" data-bj-carousel role="region" aria-roledescription="carousel" aria-label="Carrousel" tabindex="0">
<div class="bj-carousel__track">
<div class="bj-carousel__slide" role="group" aria-roledescription="slide" aria-label="Diapositive 1 sur 3">
<img src="/img/placeholder-1.svg" alt="Image 1" />
<div class="bj-carousel__caption">Première diapositive</div>
</div>
<div class="bj-carousel__slide" role="group" aria-roledescription="slide" aria-label="Diapositive 2 sur 3" aria-hidden="true">
<img src="/img/placeholder-2.svg" alt="Image 2" />
<div class="bj-carousel__caption">Deuxième diapositive</div>
</div>
<div class="bj-carousel__slide" role="group" aria-roledescription="slide" aria-label="Diapositive 3 sur 3" aria-hidden="true">
<img src="/img/placeholder-3.svg" alt="Image 3" />
<div class="bj-carousel__caption">Troisième diapositive</div>
</div>
</div>
<button class="bj-carousel__nav bj-carousel__nav--prev" data-bj-carousel-prev aria-label="Diapositive précédente">
<i class="ri-arrow-left-s-line" aria-hidden="true"></i>
</button>
<button class="bj-carousel__nav bj-carousel__nav--next" data-bj-carousel-next aria-label="Diapositive suivante">
<i class="ri-arrow-right-s-line" aria-hidden="true"></i>
</button>
<div class="bj-carousel__indicators">
<button class="bj-carousel__dot bj-carousel__dot--active" aria-label="Aller à la diapositive 1"></button>
<button class="bj-carousel__dot" aria-label="Aller à la diapositive 2"></button>
<button class="bj-carousel__dot" aria-label="Aller à la diapositive 3"></button>
</div>
</div>Lecture automatique
<div class="bj-carousel bj-carousel--auto" data-bj-carousel data-bj-carousel-auto data-bj-carousel-interval="3000">
<!-- Même structure, lecture automatique toutes les 3 secondes -->
</div>Classes CSS
| Classe | Description |
|---|---|
.bj-carousel | Conteneur principal du carrousel |
.bj-carousel__track | Piste de défilement des diapositives |
.bj-carousel__slide | Diapositive individuelle |
.bj-carousel__nav | Bouton de navigation (précédent / suivant) |
.bj-carousel__nav--prev | Modificateur : bouton précédent |
.bj-carousel__nav--next | Modificateur : bouton suivant |
.bj-carousel__indicators | Conteneur des indicateurs de position |
.bj-carousel__dot | Point indicateur individuel |
.bj-carousel__dot--active | Point indicateur actif |
.bj-carousel__caption | Légende de la diapositive |
.bj-carousel--auto | Modificateur : carrousel en lecture automatique |
Attributs data
| Classe | Description |
|---|---|
data-bj-carousel | Active le comportement carrousel |
data-bj-carousel-prev | Bouton diapositive précédente |
data-bj-carousel-next | Bouton diapositive suivante |
data-bj-carousel-auto | Active la lecture automatique |
data-bj-carousel-interval | Intervalle de lecture automatique en ms (défaut : 5000) |
Accessibilité
Le carrousel possède
role="region" et aria-roledescription="carousel". Chaque diapositive possède role="group" avec un aria-label indicatif. La navigation est possible avec les touches Flèche gauche et Flèche droite. Les boutons de navigation et indicateurs sont accessibles au focus.