Le carrousel de Bootstrap 3

Bootstrap 3 est distribué avec un petit carrousel prêt à être déployé sur des sites web. Cet outil, très simple, dispose des options basiques répondant à la plupart des besoins du développeur : un système de défilement des diapositives doté de flèches de direction disposées sur le côté, des marqueurs ronds représentant les illustrations et un bloc permettant d’afficher du texte ou du contenu HTML.

Pour afficher le carrousel de Bootstrap 3, nous utiliserons les classes .carousel et .slide ainsi que l’attribut “data-ride” auquel nous donnerons la valeur “carousel”.

Les marqueurs ronds seront mis en forme par la classe .carousel-indicators. Les images ainsi que le contenu HTML (texte, titre, boutons…) seront désignés par la classe .carousel-inner. Les flèches de défilement, quant à elles, s’afficheront grâce à la classe .carousel-control :

Explication du code :

Création du carrousel. Nous ouvrons, ici, une balise <div> accompagnée des classes .carousel et .slide. L’attribut data-ride=”carousel” permet de compléter la mise en forme. Il est important de donner un identifiant à cette balise (ici, id=”exemple-carrousel”) afin de garantir un bon fonctionnement des scripts liés au carrousel.

Annonce de la liste qui va contenir les marqueurs ronds situés en bas au centre de l’image. Ceux-ci nous permettront de naviguer au fil du carrousel. Nous allons ensuite affecter un marqueur à chaque image.

Premier marqueur. Cliquer sur celui-ci nous permettra d’afficher directement la première image que nous listerons par la suite (data-slide-to=”0″). Grâce à la classe .active, cette image sera affichée par le navigateur une fois la page chargée. Il est également nécessaire de rappeler l’identifiant du carrousel cible (data-target=”#exemple-carrousel”).

Suite et fin de la liste. Les éléments de celle-ci respectent la même structure que plus haut.

À l’intérieur de cette balise, nous allons décrire chaque diapositive composée d’une image et d’un contenu HTML.

Description de la première diapositive. La mise en forme est assurée par la classe .item. Comme nous souhaitons que cette image soit affichée au chargement de la page, nous ajoutons la classe .active.

Affichage de l’image.

Laisser un commentaire