Un carrousel permet de faire défiler automatiquement ou manuellement des éléments (images, texte, etc) à la manière d’un diaporama.
Avec bootstrap 4 ceci est rendu possible sans devoir utiliser javascipt !
Les classes utilisées :
- .carousel
- .slide
- .carousel-indicators
- .carousel-inner
- .carousel-item
- .carousel-caption
- .carousel-control-prev / carousel-control-next
- .carousel-control-prev-icon / .carousel-control-next-icon
Les attributs utilisés :
- data-ride= »carousel »
- data-target= »#… »
- data-slide-to= »… »
- data-slide= »prev »
- data-slide= »next »
Ces attributs ont pour but de remplacer le code JavaScript que vous auriez dû taper sans eux.
Ne vous inquiétez pas si pour l’instant cela vous semble confus, nous allons tout détailler dans l’exemple qui va suivre.
Mise en pratique :
Nous allons créer un carrousel composé d’un diaporama (slideshow) de 3 images qui vont défiler les unes après les autres, automatiquement mais aussi manuellement grâce aux flèches « previous » (précédent) et « next » (suivant) ou grâce à des indicateurs situés en bas du carrousel.
Cet exemple se compose en 3 parties :
- Le code.
- Le résultat.
- Les explications détaillées du code.
1 : Le code
2 : Le résultat
Et voilà notre carrousel terminé sans avoir tapé une seule ligne en javascript !
3 : Explications
Avant de commencer, on assigne un style css à notre carrousel .
On prédéfinit les dimensions du carrousel (mettre width : 100% si vous voulez qu’il prenne toute la largeur de la page).
.carousel {
max-width: 750px;
height: auto;
}
On définit ensuite la dimension des images à l’intérieur du carrousel.
.carousel-inner img {
width: 100%;
height: auto;
}
Première étape, on crée le div qui va contenir notre carrousel.
<div id=« option » class= »carousel slide » data-ride=« carousel » >
Nous indiquons à bootstrap que nous voulons créer un carrousel avec la classe .caroussel.
Nous lui donnons un identifiant id=« option »
nous rajoutons l’attribut data-ride=« carousel » pour dire à bootstrap de faire défiler les images (éléments) automatiquement.
*.slide sert à ajouter une animation lors du passage d’un élément à un autre.
Deuxième étape, on ajoute les indicateurs de pagination en bas de page.
<ul class= »carousel-indicators« >
<li data-target= »#option » data-slide-to= »0 » class= »active« ></li>
<li data-target= »#option » data-slide-to= »1« ></li>
<li data-target= »#option » data-slide-to= »2« ></li>
</ul>
On crée une liste avec la classe .carousel-indicators
On identifie chaque élément du carrousel avec l’attribut data-target=« #option »
On précise l’ordre des éléments avec l’attribut data-slide-to=« 0/1/2/… », le premier élément aura la classe .active
Troisième étape, on place le contenu principal du carrousel (dans notre exemple des images).
<div class= »carousel-inner« >
<div class= »carousel-item active« >
<img src= »galaxie1.jpg » alt= »galaxie »>
<div class= »carousel-caption« >
<h3>Galaxie 1</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
……
</div>
La classe .carousel-inner va contenir tout le contenu principal.
Chacune des images est enveloppée dans la classe .carousel-item et on rajoute la classe .active à la première d’entre elles.
On place notre image.
On rajoute une légende (c’est optionnel bien sûr) avec la classe .carousel-caption.
Quatrième et dernière étape, on crée des indicateurs qui se placeront des deux côtés de l’image (ici des flèches) pour revenir manuellement à l’image précédente ou pour avancer vers l’image suivante.
<a href= »#option » class= »carousel-control-prev » data-slide= »prev« >
<span class= »carousel-control-prev-icon« ></span>
</a>
<a href= »#option » class= »carousel-control-next » data-slide= »next« >
<span class= »carousel-control-next-icon« ></span>
</a>
On crée des balises de lien <a> dans lesquelles on place notre identifiant href= »#option«
On rajoute la classe . carousel-control-prev ou carousel-control-next avec l’attribut data-slide= »prev« ou data-slide= »next« pour spécifier vers quelle image la flèche doit nous envoyer.
Et enfin on place dans une balise <span> les icônes des indicateurs .carousel-control-prev-icon ou .carousel-control-next-icon
Options :
Voyons quelques options intéressantes.
Plein ecran :
Pour avoir son carrousel en plein écran, rajouter la classe .carousel-fullscreen.
<div id= »option » class= »carousel slide carousel-fullscreen« >
Pensez dans ce cas à enlever dans le ficher css le max-width: 750px; de la classe .carrousel.
Créer un effet fondu (fade) au changement des images.
<div id= »option » class= »carousel slide carousel-fade« >
Intervalle :
Par défaut les éléments défilent automatiquement toutes les 5 secondes (5000 millisecondes).
Pour changer ce paramètre on va rajouter à notre classe .carrousel l’attribut data-interval.
Exemple : nous voulons que nos images défilent toute les secondes.
<div id= »option » class= »carousel slide » data-ride= »carousel » data-interval= »1000 » >
Pause :
Faisons-en sorte que le défilement des images se mettent en pause au passage de la souris et reprennent lorsque la souris sort du carrousel.
Pour ce faire nous allons encore utiliser un attribut data avec notre classe .carousel.
<div id= »option » class= »carousel slide » data-ride= »carousel » data-interval= »1000″ data-pause= »hover« >
Pour illustrer la grande utilité de bootstrap nous allons refaire l’exercice en utilisant javaScript (jQuery plus exactement).
Puisque les attributs data avaient pour fonction ici de remplacer le javaScript nous allons tous les enlever.
Nous allons aussi enlever quelques classes.
Regardez bien et essayez de voir les différences.
Bien et maintenant voici le code en jquery qui remplace les attributs data.
désolée pour les erreurs!! Votre commentaire est en attente de modération.
Merci pour ce tutoriel très intéressant. J’ai une question, exemple j’ai 4 images dans mon carrousel, je veux que toutes les photos soient affichées sur mon écran en même temps que la photo active, comment faire? Merci d’avance.
Vraiment magnifique et très simple ton tuto, mais j’aimerais savoir comment ajouter des vignettes. Merci.