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.).
prefers-reduced-motion
requê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é.
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.
La .active
classe doit être ajoutée à l'une des diapositives , sinon le carrousel ne sera pas visible. Assurez-vous également de définir un unique id
sur les .carousel
contrô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-target
attribut (ou href
pour les liens) qui correspond id
à l' .carousel
élément.
Diapositives uniquement
Voici un carrousel avec des diapositives uniquement. Notez la présence de .d-block
et .w-100
sur 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 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"
.
<div id="carouselExampleControls" class="carousel slide" data-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-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Avec indicateurs
Vous pouvez également ajouter les indicateurs au carrousel, ainsi que les commandes.
<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 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-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-none
et les ramenons sur les appareils de taille moyenne avec .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-body
du CSS personnalisé au .carousel-item
s pour un fondu enchaîné approprié.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
.carousel-item
Intervalle individuel
Ajoutez data-interval=""
à a .carousel-item
pour modifier le délai entre le passage automatique à l'élément suivant.
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-touch
attribut. L'exemple ci-dessous n'inclut pas non plus l' data-ride
attribut et n'est data-interval="false"
donc pas lu automatiquement.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Usage
Via les attributs de données
Utilisez les attributs de données pour contrôler facilement la position du carrousel. data-slide
accepte les mots clés prev
ou next
, qui modifient la position de la diapositive par rapport à sa position actuelle. Vous pouvez également utiliser data-slide-to
pour 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. Si vous n'utilisez pas data-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 :
$('.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=""
.
Nom | Taper | Défaut | La description |
---|---|---|---|
intervalle | Numéro | 5000 | La durée de délai entre le cycle automatique d'un élément. Si false , le carrousel ne cyclera pas automatiquement. |
clavier | booléen | vrai | Indique si le carrousel doit réagir aux événements du clavier. |
pause | chaîne | booléen | 'flotter' | Si réglé sur Sur les appareils tactiles, lorsqu'il est réglé sur |
balade | chaîne de caractères | faux | 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. |
envelopper | booléen | vrai | Si le carrousel doit tourner en continu ou avoir des arrêts brusques. |
toucher | booléen | vrai | Si le carrousel doit prendre en charge les interactions de balayage gauche/droite sur les appareils à écran tactile. |
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 .
.carousel(options)
Initialise le carrousel avec des options facultatives object
et 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.
.carousel('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 suivant n'ait été affiché (c'est-à-dire avant que l' slid.bs.carousel
événement ne se produise).
.carousel('to')
Fait passer le carrousel à une image particulière (base 0, similaire à un tableau). 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).
É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 courantto
: 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 |
---|---|
diapositive.bs.carrousel | Cet événement se déclenche immédiatement lorsque la slide méthode d'instance est invoquée. |
glissé.bs.carrousel | Cet événement est déclenché lorsque le carrousel a terminé sa transition de diapositive. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Modifier la durée de la transition
La durée de transition .carousel-item
peut être modifiée avec la $carousel-transition
variable 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
).