Carrousel

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

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.).

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é.

Enfin, si vous construisez notre JavaScript à partir de la source, cela nécessiteutil.js .

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.

Assurez-vous de définir un identifiant unique sur les .carouselcommandes facultatives, en particulier si vous utilisez plusieurs carrousels sur une seule page.

Diapositives uniquement

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

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

Avec commandes

Ajout des contrôles précédents et suivants :

Précédent Prochain

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Avec indicateurs

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

Précédent Prochain

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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

Nulla vitae elit libero, a pharetra augue mollis interdum.

Deuxième étiquette de diapositive

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Étiquette de la troisième diapositive

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Précédent Prochain

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Usage

Via les attributs de données

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

L' data-ride="carousel"attribut est utilisé pour marquer un carrousel comme s'animant à partir du chargement de la page. 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 :

$('.carousel').carousel()

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans data-interval="".

Méthodes

.carousel(options)

Initialise le carrousel avec des options facultatives objectet commence à parcourir les éléments.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Fait défiler les éléments du carrousel de gauche à droite.

.carousel('pause')

Empêche le carrousel de parcourir les éléments.

.carousel(number)

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é (c'est-à-dire avant que l' slid.bs.carouselévénement ne se produise).

.carousel('prev')

Passe à l'élément précédent. Revient à l'appelant avant que l'élément précédent n'ait été affiché (c'est-à-dire avant que l' slid.bs.carouselévénement ne se produise).

.carousel('next')

Passe à l'élément suivant. Revient à l'appelant avant que l'élément suivant n'ait été affiché (c'est-à-dire avant que l' slid.bs.carouselévénement ne se produise).

.carousel('dispose')

Détruit le carrousel d'un élément.

É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">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})