Carrousel

Un composant de diaporama pour faire défiler les éléments (images ou diapositives de texte) comme un carrousel.

Sur cette page

Comment ça fonctionne

Le carrousel est un diaporama permettant de parcourir une série de contenus, construit avec des transformations CSS 3D et un peu de JavaScript. Il fonctionne avec une série d'images, de texte ou de balisage personnalisé. Il inclut également la prise en charge des commandes et des indicateurs précédents/suivants.

Dans les navigateurs où l' API de visibilité de la page est prise en charge, le carrousel évitera de glisser lorsque la page Web n'est pas visible pour l'utilisateur (par exemple, lorsque l'onglet du navigateur est inactif, la fenêtre du navigateur est réduite, etc.).

L'effet d'animation de ce composant dépend de la prefers-reduced-motionrequête multimédia. Voir la section mouvement réduit de notre documentation sur l'accessibilité .

Veuillez noter que les carrousels imbriqués ne sont pas pris en charge et que les carrousels ne sont généralement pas conformes aux normes d'accessibilité.

Exemple

Les carrousels ne normalisent pas automatiquement les dimensions des diapositives. En tant que tel, vous devrez peut-être utiliser des utilitaires supplémentaires ou des styles personnalisés pour dimensionner correctement le contenu. Bien que les carrousels prennent en charge les contrôles et indicateurs précédents/suivants, ils ne sont pas explicitement requis. Ajoutez et personnalisez comme bon vous semble.

La .activeclasse doit être ajoutée à l'une des diapositives , sinon le carrousel ne sera pas visible. Assurez-vous également de définir un unique idsur les .carouselcontrôles facultatifs, en particulier si vous utilisez plusieurs carrousels sur une seule page. Les éléments de contrôle et d'indicateur doivent avoir un data-bs-targetattribut (ou hrefpour les liens) qui correspond idà l' .carouselélément.

Diapositives uniquement

Voici un carrousel avec des diapositives uniquement. Notez la présence de .d-blocket .w-100sur les images du carrousel pour empêcher l'alignement des images par défaut du navigateur.

html

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Avec commandes

Ajout des contrôles précédents et suivants. Nous vous recommandons d'utiliser des <button>éléments, mais vous pouvez également utiliser des <a>éléments avec role="button".

html

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Avec indicateurs

Vous pouvez également ajouter les indicateurs au carrousel, ainsi que les commandes.

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Avec légendes

Ajoutez facilement des légendes à vos diapositives avec l' .carousel-captionélément dans n'importe quel fichier .carousel-item. Ils peuvent être facilement masqués dans des fenêtres plus petites, comme illustré ci-dessous, à l'aide d'utilitaires d'affichage facultatifs . Nous les cachons initialement avec .d-noneet les ramenons sur les appareils de taille moyenne avec .d-md-block.

Première étiquette de diapositive

Un contenu d'espace réservé représentatif pour la première diapositive.

Deuxième étiquette de diapositive

Un contenu d'espace réservé représentatif pour la deuxième diapositive.

Étiquette de la troisième diapositive

Un contenu d'espace réservé représentatif pour la troisième diapositive.

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Fondu enchaîné

Ajoutez .carousel-fadeà votre carrousel pour animer des diapositives avec une transition en fondu au lieu d'une diapositive. En fonction du contenu de votre carrousel (par exemple, des diapositives contenant uniquement du texte), vous souhaiterez peut-être ajouter .bg-bodydu CSS personnalisé au .carousel-items pour un fondu enchaîné approprié.

html

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

`.carousel-item`Intervalle individuel

Ajoutez data-bs-interval=""à a .carousel-itempour modifier le délai entre le passage automatique à l'élément suivant.

html

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Désactiver le balayage tactile

Les carrousels prennent en charge le balayage vers la gauche/droite sur les appareils à écran tactile pour se déplacer entre les diapositives. Ceci peut être désactivé à l'aide de l' data-bs-touchattribut. L'exemple ci-dessous n'inclut pas non plus l' data-bs-rideattribut, il n'est donc pas lu automatiquement.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Variante sombre

Ajouter .carousel-darkau .carouselpour des commandes, des indicateurs et des légendes plus sombres. Les contrôles ont été inversés à partir de leur remplissage blanc par défaut avec la filterpropriété CSS. Les légendes et les contrôles ont des variables Sass supplémentaires qui personnalisent les coloret background-color.

Première étiquette de diapositive

Un contenu d'espace réservé représentatif pour la première diapositive.

Deuxième étiquette de diapositive

Un contenu d'espace réservé représentatif pour la deuxième diapositive.

Étiquette de la troisième diapositive

Un contenu d'espace réservé représentatif pour la troisième diapositive.

html

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Transition personnalisée

La durée de transition .carousel-itempeut être modifiée avec la $carousel-transition-durationvariable Sass avant la compilation ou les styles personnalisés si vous utilisez le CSS compilé. Si plusieurs transitions sont appliquées, assurez-vous que la transition de transformation est définie en premier (par exemple transition: transform 2s ease, opacity .5s ease-out).

Toupet

variables

Variables pour tous les carrousels :

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Variables pour le carrousel sombre :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Usage

Via les attributs de données

Utilisez les attributs de données pour contrôler facilement la position du carrousel. data-bs-slideaccepte les mots clés prevou next, qui modifient la position de la diapositive par rapport à sa position actuelle. Vous pouvez également utiliser data-bs-slide-topour transmettre un index de diapositive brut au carrousel data-bs-slide-to="2", ce qui déplace la position de la diapositive vers un index particulier commençant par 0.

L' data-bs-ride="carousel"attribut est utilisé pour marquer un carrousel comme s'animant à partir du chargement de la page. Si vous n'utilisez pas data-bs-ride="carousel"pour initialiser votre carrousel, vous devez l'initialiser vous-même. Il ne peut pas être utilisé en combinaison avec une initialisation JavaScript explicite (redondante et inutile) du même carrousel.

Via Javascript

Appelez le carrousel manuellement avec :

const carousel = new bootstrap.Carousel('#myCarousel')

Choix

Comme les options peuvent être transmises via des attributs de données ou JavaScript, vous pouvez ajouter un nom d'option à data-bs-, comme dans data-bs-animation="{value}". Assurez-vous de changer le type de casse du nom de l'option de " camelCase " à " kebab-case " lors du passage des options via les attributs de données. Par exemple, utilisez à la data-bs-custom-class="beautifier"place de data-bs-customClass="beautifier".

Depuis Bootstrap 5.2.0, tous les composants prennent en charge un attribut de données expérimentaldata-bs-config réservé pouvant héberger une configuration de composant simple sous forme de chaîne JSON. Lorsqu'un élément a des attributs data-bs-config='{"delay":0, "title":123}'et , la valeur finale sera et les attributs de données séparés remplaceront les valeurs données sur . De plus, les attributs de données existants peuvent héberger des valeurs JSON telles que .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Nom	Taper	Défaut	La description
`interval`	Numéro	`5000`	La durée de délai entre le cycle automatique d'un élément.
`keyboard`	booléen	`true`	Indique si le carrousel doit réagir aux événements du clavier.
`pause`	chaîne, booléen	`"hover"`	Si réglé sur `"hover"`, interrompt le cycle du carrousel sur `mouseenter`et reprend le cycle du carrousel sur `mouseleave`. S'il est défini sur `false`, passer la souris sur le carrousel ne le mettra pas en pause. Sur les appareils tactiles, lorsqu'il est réglé sur `"hover"`, le cycle s'interrompt `touchend`(une fois que l'utilisateur a fini d'interagir avec le carrousel) pendant deux intervalles, avant de reprendre automatiquement. Cela s'ajoute au comportement de la souris.
`ride`	chaîne, booléen	`false`	S'il est défini sur `true`, lance automatiquement le carrousel une fois que l'utilisateur a parcouru manuellement le premier élément. Si défini sur `"carousel"`, lance automatiquement le carrousel au chargement.
`touch`	booléen	`true`	Si le carrousel doit prendre en charge les interactions de balayage gauche/droite sur les appareils à écran tactile.
`wrap`	booléen	`true`	Si le carrousel doit tourner en continu ou avoir des arrêts brusques.

Méthodes

Méthodes et transitions asynchrones

Toutes les méthodes API sont asynchrones et démarrent une transition . Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine . De plus, un appel de méthode sur un composant en transition sera ignoré .

Consultez notre documentation JavaScript pour plus d'informations .

Vous pouvez créer une instance de carrousel avec le constructeur de carrousel, par exemple, pour initialiser avec des options supplémentaires et commencer à parcourir les éléments :

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

Méthode	La description
`cycle`	Fait défiler les éléments du carrousel de gauche à droite.
`dispose`	Détruit le carrousel d'un élément. (Supprime les données stockées sur l'élément DOM)
`getInstance`	Méthode statique qui permet d'obtenir l'instance du carrousel associée à un élément DOM, vous pouvez l'utiliser comme ceci : `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Méthode statique qui renvoie une instance de carrousel associée à un élément DOM ou en crée une nouvelle au cas où elle n'aurait pas été initialisée. Vous pouvez l'utiliser comme ceci : `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Passe à l'élément suivant. Revient à l'appelant avant que l'élément suivant n'ait été affiché (par exemple, avant que l' `slid.bs.carousel`événement ne se produise).
`nextWhenVisible`	Ne faites pas passer le carrousel au suivant lorsque la page n'est pas visible ou que le carrousel ou son parent n'est pas visible. Revient à l'appelant avant que l'élément cible n'ait été affiché .
`pause`	Empêche le carrousel de parcourir les éléments.
`prev`	Passe à l'élément précédent. Revient à l'appelant avant que l'élément précédent n'ait été affiché (par exemple, avant que l' `slid.bs.carousel`événement ne se produise).
`to`	Fait passer le carrousel à une image particulière (base 0, similaire à un tableau). Renvoie à l'appelant avant que l'élément cible n'ait été affiché (par exemple, avant que l' `slid.bs.carousel`événement ne se produise).

Événements

La classe de carrousel de Bootstrap expose deux événements pour se connecter à la fonctionnalité de carrousel. Les deux événements ont les propriétés supplémentaires suivantes :

direction: La direction dans laquelle le carrousel glisse ( "left"ou "right").
relatedTarget: L'élément DOM qui est mis en place en tant qu'élément actif.
from: L'index de l'élément courant
to: L'index de l'élément suivant

Tous les événements du carrousel sont déclenchés sur le carrousel lui-même (c'est-à-dire sur le <div class="carousel">).

Type d'événement	La description
`slid.bs.carousel`	Déclenché lorsque le carrousel a terminé sa transition de diapositive.
`slide.bs.carousel`	Se déclenche immédiatement lorsque la `slide`méthode d'instance est invoquée.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

Carrousel

Comment ça fonctionne

Exemple

Diapositives uniquement

Avec commandes

Avec indicateurs

Avec légendes

Première étiquette de diapositive

Deuxième étiquette de diapositive

Étiquette de la troisième diapositive

Fondu enchaîné

.carousel-itemIntervalle individuel

Désactiver le balayage tactile

Variante sombre

Première étiquette de diapositive

Deuxième étiquette de diapositive

Étiquette de la troisième diapositive

Transition personnalisée

Toupet

variables

Usage

Via les attributs de données

Via Javascript

Choix

Méthodes

Méthodes et transitions asynchrones

Événements

`.carousel-item`Intervalle individuel