carousel
data-ride="carousel"
..carousel
: Crée un carrousel.carousel-indicators
: Ajoute des indicateurs pour le carrousel. Ce sont les petits points au bas de chaque diapositive (qui indiquent le nombre de diapositives présentes dans le carrousel et la diapositive actuellement visualisée par l’utilisateur)..carousel-inner
:Ajoute des diapositives au carrousel.carousel-item
:Spécifie le contenu de chaque diapositive.carousel-control-prev
:Ajoute un bouton gauche (précédent) au carrousel, ce qui permet à l’utilisateur de revenir en arrière entre les diapositives..carousel-control-next
:Ajoute un bouton droit (suivant) au carrousel, ce qui permet à l’utilisateur d’avancer entre les diapositives..carousel-control-prev-icon
: Utilisé avec .carousel-control-prev pour créer un bouton “précédent”.carousel-control-next-icon
:Utilisé avec .carousel-control-next pour créer un bouton “suivant”.slide
:Ajoute un effet de transition et d’animation CSS lors du glissement d’un élément à un autre. Supprimez cette classe si vous ne voulez pas cet effet.carousel-caption
:Ajoute des éléments à l’intérieur de chaque élément <div class="carousel-item"> pour créer une légende pour chaque diapositivedata-ride="carousel"
:L’attribut ddata-ride="carousel" est utilisé pour marquer un carrousel comme étant animé à partir du chargement de la page. Il ne peut pas être utilisé en combinaison avec une initialisation JavaScript explicite.data-target="#…"
:data-slide-to="…"
:Utilisé pour déplacer la position de la diapositive vers un élément particulier (index commençant par 0) lorsque vous cliquez sur l’indicateur de carrousel spécifique.data-slide="prev"
data-slide="next"
class="carousel"
spécifie qu’il <div> contient un carrousel..carousel slide
ajoute un effet de transition et d’animation CSS, ce qui fait glisser les éléments lors de l’affichage d’un nouvel élément. Omettez cette classe si vous ne voulez pas cet effet..carousel-indicators
.data-target
pointe vers l’identifiant du carrousel.data-slide-to
spécifie la diapositive à utiliser pour cliquer sur le point spécifique..carousel-inner
..item
.Cela peut être du texte ou des images..active
doit être ajoutée à l’une des diapositives. Sinon, le carrousel ne sera pas visible.data-slide
accepte les mots-clés “prev“ou “next“qui modifient la position de la diapositive par rapport à sa position actuelle.data-target
. L’attribut data-slide-to
permet d’identifier la diapositive concernée.Exemple:
<div id.="carousel" class="carousel slide">
<ol class="arousel-indicators">
<li data-target=
"#carousel" data-slide-to=
"0" class="active"></li>
<li data-target=
"#carousel" data-slide-to=
"1"></li>
<li data-target=
"#carousel" data-slide-to=
"2"></li>
</ol>
<div class=”carousel-inner”>
<div class=”item active”>
……………..
.carousel-caption
au sein de tout .carousel-item
..d-none
et les ramenons sur des appareils de taille moyenne avec .d-md-block
.<a class="carousel-control-prev" href="#ex-bouton" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#ex-bouton" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
<style>
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;
charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'
fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath
d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;
charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'
fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath
d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
</style>
fill='%23f00'
son sujet remplit la forme avec une couleur, dans ce cas #f00 (blanc), pour le rouge, remplacez simplement par #f00.carousel-fullscreen
.carousel-fullscreen"
> .carrousel
.<div id="option" class="carousel slide" data-ride="carousel" data-interval="1000">
.carousel
.