ComposantsJavaScript requis

Carrousel

Le carrousel fait défiler une série de diapositives (images, textes ou cartes) avec des commandes précédent et suivant, des indicateurs et un défilement automatique facultatif. Il demande le JavaScript de Cauri.

Carrousel de base#

Chaque diapositive est un carousel-item ; une seule porte active. Les images sont ici des SVG en ligne avec un texte alternatif. Les boutons précédent et suivant contiennent un texte masqué pour les lecteurs d’écran.

<section id="car-base" class="carousel slide" aria-label="Offres du moment">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="d-block w-100" viewBox="0 0 800 300" role="img" aria-label="Diapositive 1 : épargne" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="300" fill="#2B62AA"/>
        <text x="400" y="160" fill="#ffffff" font-size="36" text-anchor="middle">Livret d'épargne</text>
      </svg>
    </div>
    <div class="carousel-item">
      <svg class="d-block w-100" viewBox="0 0 800 300" role="img" aria-label="Diapositive 2 : prêt personnel" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="300" fill="#387A1B"/>
        <text x="400" y="160" fill="#ffffff" font-size="36" text-anchor="middle">Prêt personnel</text>
      </svg>
    </div>
    <div class="carousel-item">
      <svg class="d-block w-100" viewBox="0 0 800 300" role="img" aria-label="Diapositive 3 : carte bancaire" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="300" fill="#0856A1"/>
        <text x="400" y="160" fill="#ffffff" font-size="36" text-anchor="middle">Carte bancaire</text>
      </svg>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#car-base" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Précédent</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#car-base" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Suivant</span>
  </button>
</section>

Indicateurs et légendes#

Les indicateurs sont des boutons data-bs-slide-to placés dans carousel-indicators ; celui de la diapositive affichée porte class="active" et aria-current="true". Les légendes carousel-caption se superposent à l’image ; masquez-les sur petit écran avec d-none d-md-block si l’espace manque.

Ouvrir un compte

Rendez-vous en agence avec une pièce d'identité.

Simuler un prêt

Estimez votre mensualité en quelques secondes.

Suivre ses comptes

Consultez vos soldes à tout moment.

<section id="car-indic" class="carousel slide" aria-label="Services en agence">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#car-indic" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Diapositive 1"></button>
    <button type="button" data-bs-target="#car-indic" data-bs-slide-to="1" aria-label="Diapositive 2"></button>
    <button type="button" data-bs-target="#car-indic" data-bs-slide-to="2" aria-label="Diapositive 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="d-block w-100" viewBox="0 0 800 300" role="img" aria-label="Fond bleu" xmlns="http://www.w3.org/2000/svg"><rect width="800" height="300" fill="#2B62AA"/></svg>
      <div class="carousel-caption d-none d-md-block">
        <h5>Ouvrir un compte</h5>
        <p>Rendez-vous en agence avec une pièce d'identité.</p>
      </div>
    </div>
    <div class="carousel-item">
      <svg class="d-block w-100" viewBox="0 0 800 300" role="img" aria-label="Fond vert" xmlns="http://www.w3.org/2000/svg"><rect width="800" height="300" fill="#387A1B"/></svg>
      <div class="carousel-caption d-none d-md-block">
        <h5>Simuler un prêt</h5>
        <p>Estimez votre mensualité en quelques secondes.</p>
      </div>
    </div>
    <div class="carousel-item">
      <svg class="d-block w-100" viewBox="0 0 800 300" role="img" aria-label="Fond bleu foncé" xmlns="http://www.w3.org/2000/svg"><rect width="800" height="300" fill="#0856A1"/></svg>
      <div class="carousel-caption d-none d-md-block">
        <h5>Suivre ses comptes</h5>
        <p>Consultez vos soldes à tout moment.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#car-indic" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Précédent</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#car-indic" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Suivant</span>
  </button>
</section>

Défilement automatique avec bouton de pause#

data-bs-ride="carousel" lance le défilement au chargement de la page ; data-bs-interval règle la durée par diapositive en millisecondes (5 000 par défaut), et peut être posé sur une diapositive précise. Un défilement automatique doit toujours pouvoir être arrêté : ajoutez un bouton de pause qui appelle pause() et cycle().

<section id="car-auto" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000" aria-label="Actualités de la banque">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="d-block w-100" viewBox="0 0 800 220" role="img" aria-label="Actualité 1 : nouvelles agences" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="220" fill="#2B62AA"/>
        <text x="400" y="120" fill="#ffffff" font-size="30" text-anchor="middle">Deux nouvelles agences ouvrent</text>
      </svg>
    </div>
    <div class="carousel-item" data-bs-interval="8000">
      <svg class="d-block w-100" viewBox="0 0 800 220" role="img" aria-label="Actualité 2 : application mobile" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="220" fill="#387A1B"/>
        <text x="400" y="120" fill="#ffffff" font-size="30" text-anchor="middle">L'application mobile évolue</text>
      </svg>
    </div>
    <div class="carousel-item">
      <svg class="d-block w-100" viewBox="0 0 800 220" role="img" aria-label="Actualité 3 : épargne" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="220" fill="#0856A1"/>
        <text x="400" y="120" fill="#ffffff" font-size="30" text-anchor="middle">Épargnez dès 5 000 FCFA</text>
      </svg>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#car-auto" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Précédent</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#car-auto" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Suivant</span>
  </button>
</section>
<button type="button" class="btn btn-outline-primary btn-sm mt-2" id="car-auto-pause" aria-pressed="false">Mettre en pause</button>
<script>
  (function () {
    var element = document.getElementById('car-auto');
    var bouton = document.getElementById('car-auto-pause');
    if (!element || !bouton || !window.bootstrap) { return; }
    var carrousel = bootstrap.Carousel.getOrCreateInstance(element);
    bouton.addEventListener('click', function () {
      var enPause = bouton.getAttribute('aria-pressed') === 'true';
      if (enPause) { carrousel.cycle(); } else { carrousel.pause(); }
      bouton.setAttribute('aria-pressed', String(!enPause));
      bouton.textContent = enPause ? 'Mettre en pause' : 'Reprendre le défilement';
    });
  })();
</script>

Fondu enchaîné#

Ajoutez carousel-fade pour remplacer le glissement par un fondu.

<section id="car-fondu" class="carousel slide carousel-fade" aria-label="Moyens de paiement">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="d-block w-100" viewBox="0 0 800 220" role="img" aria-label="Paiement par carte" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="220" fill="#2B62AA"/>
        <text x="400" y="120" fill="#ffffff" font-size="30" text-anchor="middle">Paiement par carte</text>
      </svg>
    </div>
    <div class="carousel-item">
      <svg class="d-block w-100" viewBox="0 0 800 220" role="img" aria-label="Paiement mobile" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="220" fill="#387A1B"/>
        <text x="400" y="120" fill="#ffffff" font-size="30" text-anchor="middle">Paiement mobile</text>
      </svg>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#car-fondu" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Précédent</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#car-fondu" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Suivant</span>
  </button>
</section>

Classes

Classes
Classe	Rôle
`carousel`, `slide`	Conteneur du carrousel ; `slide` active l’animation de glissement.
`carousel-fade`	Remplace le glissement par un fondu.
`carousel-inner`	Enveloppe des diapositives.
`carousel-item`	Une diapositive ; une seule porte `active`.
`carousel-control-prev`, `carousel-control-next`	Boutons précédent et suivant, avec `carousel-control-prev-icon` et `carousel-control-next-icon`.
`carousel-indicators`	Rangée de boutons indicateurs.
`carousel-caption`	Légende superposée au bas de la diapositive.

Options JavaScript

Les options se posent en attributs data-bs-* (par exemple data-bs-wrap="false") ou dans l’objet de configuration.

Options JavaScript
Option	Type	Défaut	Description
`interval`	nombre	`5000`	Durée d’affichage de chaque diapositive, en millisecondes. Peut être surchargée par `data-bs-interval` sur une diapositive.
`keyboard`	booléen	`true`	Réagit aux flèches gauche et droite du clavier.
`pause`	chaîne ou booléen	`"hover"`	Avec `"hover"`, le défilement s’arrête au survol de la souris et reprend à la sortie. Avec `false`, il ne s’arrête pas.
`ride`	booléen ou chaîne	`false`	`"carousel"` lance le défilement au chargement ; `true` le lance après la première interaction (clic sur une commande).
`touch`	booléen	`true`	Active le balayage au doigt sur les écrans tactiles.
`wrap`	booléen	`true`	Revient à la première diapositive après la dernière (défilement en boucle).

Méthodes

Méthodes
Méthode	Description
`cycle()`	Démarre ou reprend le défilement automatique.
`pause()`	Arrête le défilement automatique.
`next()`	Affiche la diapositive suivante.
`nextWhenVisible()`	Affiche la suivante seulement si la page et le carrousel sont visibles.
`prev()`	Affiche la diapositive précédente.
`to(index)`	Affiche la diapositive d’indice donné (à partir de 0).
`dispose()`	Détruit l’instance.
`getInstance(element)`	Méthode statique : renvoie l’instance associée, ou `null`.
`getOrCreateInstance(element, options)`	Méthode statique : renvoie l’instance existante ou en crée une.

Événements

Ils sont émis sur le carrousel. L’objet événement fournit direction ("left" ou "right"), relatedTarget (la diapositive qui arrive), from et to (indices de départ et d’arrivée).

Événements
Événement	Description
`slide.bs.carousel`	Au début d’une transition. `preventDefault()` l’annule.
`slid.bs.carousel`	Quand la transition est terminée.

Attributs data-bs

Attributs data-bs
Attribut	Où le poser	Rôle
`data-bs-ride="carousel"`	Carrousel	Démarre le défilement automatique au chargement.
`data-bs-target="#id"`	Commandes et indicateurs	Désigne le carrousel piloté.
`data-bs-slide="prev"` ou `"next"`	Commandes	Va à la diapositive précédente ou suivante.
`data-bs-slide-to="n"`	Indicateurs	Va à la diapositive d’indice `n` (à partir de 0).
`data-bs-interval="ms"`	Diapositive ou carrousel	Durée d’affichage en millisecondes.
`data-bs-pause`, `data-bs-keyboard`, `data-bs-touch`, `data-bs-wrap`	Carrousel	Équivalents des options du même nom.

Variables Sass

Variables Sass
Variable	Défaut	Rôle
`$carousel-control-color`	`#fff`	Couleur des flèches.
`$carousel-control-width`	`15%`	Largeur de la zone cliquable de chaque commande.
`$carousel-control-opacity`, `$carousel-control-hover-opacity`	`.5`, `.9`	Opacité des commandes au repos et au survol.
`$carousel-control-icon-width`	`2rem`	Taille de la flèche.
`$carousel-indicator-width`, `$carousel-indicator-height`	`30px`, `3px`	Dimensions d’un indicateur.
`$carousel-indicator-hit-area-height`	`10px`	Hauteur de la zone cliquable de l’indicateur.
`$carousel-indicator-spacer`	`3px`	Espace de part et d’autre d’un indicateur.
`$carousel-indicator-opacity`, `$carousel-indicator-active-opacity`	`.5`, `1`	Opacité d’un indicateur inactif, puis actif.
`$carousel-indicator-active-bg`	`#fff`	Couleur des indicateurs.
`$carousel-caption-width`	`70%`	Largeur de la légende.
`$carousel-caption-color`	`#fff`	Couleur du texte de la légende.
`$carousel-caption-padding-y`, `$carousel-caption-spacer`	`1.25rem`, `1.25rem`	Espacement vertical et distance au bas de la diapositive.
`$carousel-transition-duration`	`.6s`	Durée de la transition entre diapositives.

Personnalisation#

// Global : avant l'import de Cauri
$carousel-transition-duration: 0.4s;
$carousel-indicator-width: 24px;
$carousel-control-opacity: 0.8;

// Un fond sous la légende pour garder le texte lisible
.carousel-caption {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 0.3125rem;
}

Utilisation en JavaScript#

const element = document.querySelector('#car-base');
const carrousel = new bootstrap.Carousel(element, {
  interval: 6000,
  wrap: false,
  pause: 'hover',
});

element.addEventListener('slid.bs.carousel', (evenement) => {
  console.log('De la diapositive', evenement.from, 'à la diapositive', evenement.to);
});

carrousel.to(2);

Bonnes pratiques

À faire

Limitez-vous à trois à cinq diapositives, chacune compréhensible seule.
Donnez à chaque image un texte alternatif précis ; le texte porté par l’image doit aussi exister en HTML ou dans aria-label.
Proposez toujours les boutons précédent et suivant, et des indicateurs quand l’utilisateur doit se repérer.
Si vous activez le défilement automatique, fournissez un bouton de pause et gardez un intervalle assez long.

À éviter

Ne placez pas dans un carrousel un contenu essentiel : certains utilisateurs ne verront pas toutes les diapositives.
Ne lancez pas le défilement automatique avec data-bs-ride="carousel" sans moyen de l’arrêter.
N’utilisez pas des diapositives de hauteurs différentes : la page saute à chaque changement.
Ne superposez pas du texte à une image trop claire ou trop chargée.

Accessibilité

Donnez un nom au carrousel avec aria-label sur une balise section, et un texte masqué (visually-hidden) à chaque commande.
Les boutons précédent et suivant sont de vrais button atteints au clavier ; les flèches gauche et droite changent de diapositive tant que keyboard est actif.
Chaque indicateur porte un aria-label ; celui de la diapositive courante porte aria-current="true".
Un défilement automatique qui dure plus de cinq secondes doit pouvoir être mis en pause : c’est une exigence d’accessibilité (critère 2.2.2 du RGAA et des WCAG). Le défilement s’arrête déjà au survol, mais pas au focus clavier : prévoyez le bouton.
Les transitions sont désactivées pour les personnes qui ont demandé moins d’animations.