Sommaire

Les carrousels d’images PLUGINS JAVASCRIPT:Carrousels d’images

1. L’objectif

Les carrousels sont très communs dans les sites Web, ils permettent de faire défiler des images automatiquement ou par action du visiteur.

Retrouvez un exemple de carrousel dans le fichier Bootstrap-08-JavaScript/05-carousel.html.

2. Les conteneurs

Nous avons notre structure Bootstrap classique avec les boîtes <div class="container"> et <div class="row">. Dans cette dernière nous utilisons une boîte <div class="boite"> dont la largeur est égale à celle des images affichées (width: 300px;). Puis nous y insérons le carrousel.

3. Le carrousel

Le carrousel est constitué de plusieurs boîtes <div> imbriquées dont voici la structure :

images/C14-015.png

Le carrousel est placé dans une boîte <div> racine <div id="moncarrousel" class="carousel slide" data-ride="carousel">. Cette boîte possède un identifiant id unique, moncarrousel dans cet exemple, qui sera utilisé dans l’interaction utilisateur. Cette boîte utilise des classes Bootstrap pour sa mise en forme.

Le premier élément inclus dans le conteneur est une liste <ol>. Cette liste contient les boutons de contrôle du carrousel. La classe .carousel-indicators Bootstrap permet sa mise en forme.

Chaque item <li> permet l’affichage d’un petit rond indiquant l’ordre d’affichage des images. ...