Un carrousel permet de faire défiler automatiquement ou manuellement des images à la manière d’un diaporama. La transition des images peut se faire par substitution ou par translation. Dans ce chapitre nous allons voir comment mettre en œuvre celui proposé par Bootstrap.

Le principe

Le carrousel doit être englobé avec :

une classe carousel ,
un attribut data-ride= »carousel ».

Le contenu doit être englobé avec une classe carousel-inner si on veut disposer des contrôles.

Chaque image doit être englobée avec une classe carousel-item. Pour que le carrousel fonctionne il faut absolument que l’une des images soit activée avec la classe active.

Ce qui nous donne le schéma suivant :

Enfin il faut prévoir les classes d-block et w-100 pour les images.

La classe d-block (d pour display) fait partie d’une série de classes bien pratiques pour la visualisation que nous avons déjà vues dans une précédente partie, on a par exemple d-none pour ne rien afficher, ou d-inline. On a aussi les variations en fonction des supports, par exemple d-md-block.

Ce qui donne le code minimal suivant pour 3 images :

<div class="carousel" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images/t1.jpg" alt="Un tigre">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/t2.jpg" alt="Un tigre">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/t3.jpg" alt="Un tigre">
    </div>
  </div>
</div>

Tester en ligne

Si on veut un changement d’image par translation il faut ajouter la classe slide :

<div class="carousel slide" data-ride="carousel">

Par défaut les images se succèdent toutes les 5 secondes. On peut changer cette valeur avec l’attribut data-interval :

<div class="carousel slide" data-ride="carousel" data-interval="2000">

La valeur est exprimée en millièmes de secondes, donc ici on a 2 secondes.

Des titres dans les images

Il est possible de faire apparaître un titre pour chaque image dans la partie inférieure avec la classe carousel-caption :

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images/t1.jpg" alt="Un tigre">
      <div class="carousel-caption d-none d-md-block">
        <h1>Un tigre</h1>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/t2.jpg" alt="Un tigre">
      <div class="carousel-caption d-none d-md-block">
        <h1>Un autre tigre</h1>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/t3.jpg" alt="Un tigre">
      <div class="carousel-caption d-none d-md-block">
        <h1>Encore un tigre</h1>
      </div>
    </div>
  </div>
</div>

Tester en ligne

On peut utiliser n’importe quelle typographie pour le contenu textuel.

Il est conseillé d’utiliser des classes utilitaires d’affichage pour éviter d’avoir le titre qui apparaît sur les petits supports. Ici on a utilisé d-md-block donc on limite l’affichage du titre aux écrans moyens et grands.

Notez que le titre vient au-dessus de l’image et qu’il faut donc adapter le style aux couleurs présentes sur l’image pour que le titre soit lisible.

Un indicateur-sélecteur de l’image affichée

Il est possible de faire apparaître un indicateur-sélecteur pour savoir quelle image est affichée et aussi pour accéder directement à une image particulière. Il faut :

utiliser une liste ordonnée équipée de la classe carousel-indicators,
identifier dans chaque élément de la liste le carrousel avec l’attribut data-target,
utiliser l’attribut data-slide-to pour identifier numériquement la diapositive concernée.

<div class="carousel slide" data-ride="carousel">
  <ol class="carousel-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="carousel-item active">
      <img class="d-block w-100" src="images/t1.jpg" alt="Un tigre">
      <div class="carousel-caption">
        <h1>Un tigre</h1>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/t2.jpg" alt="Un tigre">
      <div class="carousel-caption">
        <h1>Un autre tigre</h1>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/t3.jpg" alt="Un tigre">
      <div class="carousel-caption">
        <h1>Encore un tigre</h1>
      </div>
    </div>
  </div>
</div>

Tester en ligne

On peut sélectionner la diapositive à afficher en cliquant sur l’indicateur.

Des boutons de défilement

On peut afficher des boutons à droite et à gauche pour permettre un défilement manuel des images. Il faut identifier le carrousel pour le référencer dans les liens avec href. Les boutons doivent être équipés :

de la classe carousel-control-prev ou carousel-control-next,
de l’attribut data-slide avec la valeur prev ou next.

<div id="carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-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="carousel-item active">
      <img class="d-block w-100" src="images/t1.jpg" alt="Un tigre">
      <div class="carousel-caption">
        <h1>Un tigre</h1>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/t2.jpg" alt="Un tigre">
      <div class="carousel-caption">
        <h1>Un autre tigre</h1>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/t3.jpg" alt="Un tigre">
      <div class="carousel-caption">
        <h1>Encore un tigre</h1>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a> 
</div>

Tester en ligne

Accessibilité

Rôles

Si on ajoute des boutons de défilement il faut leur adjoindre le rôle button puisque la balise <a> n’est pas sémantiquement pertinente :

<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">

Propriétés

Si on ajoute des boutons de défilement il faut prévoir la propriété aria-hidden avec la valeur true dans la balise <span> qui va accueillir l’icône :

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

Lecteur d’écran

Si on ajoute des boutons de défilement il faut prévoir une information pour les lecteurs d’écran :

<span class="sr-only">Précédent</span>
...
<span class="sr-only">Suivant</span>

Résumé pour les boutons de défilement

Voici donc la syntaxe de base pour les boutons de défilement :

<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Précédent</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Suivant</span>
</a>

Activation avec Javascript

Dans les exemples précédents on a lancé le carrousel avec data-ride= »carousel ». Si on veut changer un peu le fonctionnement de base il faut le lancer de façon explicite à partir du Javascript. Donc dans la balise englobante on prévoit juste ce code :

<div id="carousel" class="carousel slide">

En l’état le carrousel ne fonctionne plus de façon automatique mais on peut le lancer avec jQuery :

$('.carousel').carousel();

Quel intérêt ?

Si on ne veut rien faire de spécial aucun mais nous allons envisager des cas où ça devient utile.

Cycle et pause

On peut avec jQuery commander le démarrage du cycle ou la pause :

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label id="cycle" class="btn btn-primary active">
          <input type="radio" checked>Cycle
        </label>
        <label id="pause" class="btn btn-primary">
          <input type="radio">Pause
        </label>
      </div>
    </div>
    <div class="col-md-9">
      <div class="carousel slide">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="images/t1.jpg" alt="Un tigre">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/t2.jpg" alt="Un tigre">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/t3.jpg" alt="Un tigre">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="js/bootstrap.js"></script>
<script>
  $(function () {
    $('.carousel').carousel({ interval: 2000 })
    $('#cycle').click(function() {
      $('.carousel').carousel('cycle')
    })
    $('#pause').click(function() {
      $('.carousel').carousel('pause')
    })
  })
</script>

Tester en ligne

Les deux boutons commandent le diaporama. Une bonne occasion pour revoir comment configurer des boutons de type « radio » avec Bootstrap. Remarquez aussi qu’on peut transmettre des options au carrousel lorsqu’on le commande comme je l’ai fait ici en affectant la valeur 2000 à la propriété interval pour avoir un défilement au rythme de 2 secondes.

Autres commandes

Voici maintenant un exemple plus complet avec une palette de boutons de commande :

<div class="container">
  <div class="row">
    <div class="col-md-12 pb-2">
      <div class="carousel slide">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="images/t1.jpg" alt="Un tigre">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/t2.jpg" alt="Un tigre">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/t3.jpg" alt="Un tigre">
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12 text-center">
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label id="first" class="btn btn-success">
          <input type="radio"><span class="fa fa-fast-backward"></span>
        </label>
        <label id="previous" class="btn btn-success">
          <input type="radio"><span class="fa fa-step-backward"></span>
        </label>
        <label id="pause" class="btn btn-success">
          <input type="radio"><span class="fa fa-pause"></span>
        </label>
        <label id="play" class="btn btn-success active">
          <input type="radio" checked><span class="fa fa-play"></span>
        </label>
        <label id="next" class="btn btn-success">
          <input type="radio"><span class="fa fa-step-forward"></span>
        </label>
        <label id="last" class="btn btn-success">
          <input type="radio"><span class="fa fa-fast-forward"></span>
        </label>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="js/bootstrap.js"></script>
<script>
  $(function () {
    $('.carousel').carousel({ interval: 2000 })
    $('#first').click(function() { $('.carousel').carousel(0) })
    $('#previous').click(function() { $('.carousel').carousel('prev') })
    $('#pause').click(function() { $('.carousel').carousel('pause') })
    $('#play').click(function() { $('.carousel').carousel('cycle') })
    $('#next').click(function() { $('.carousel').carousel('next') })
    $('#last').click(function() { $('.carousel').carousel($('.carousel-item').length - 1) })
  })
</script>

Tester en ligne

Les événements

Vous disposez de 2 événements pour ce plugin :

slide.bs.carousel : se déclenche dès l’appel à la méthode slide
slid.bs.carousel : se déclenche lorsque la translation est terminée

Complétons l’exemple précédent en prévoyant l’affichage de l’index de la diapositive en cours ainsi que le nombre total de diapositives. Voici le code avec ce complément :

<div class="container">
  <div class="row">
    <div class="col-md-12 pb-2">
      <div class="carousel slide">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="images/t1.jpg" alt="Un tigre">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/t2.jpg" alt="Un tigre">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/t3.jpg" alt="Un tigre">
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12 text-center">
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label id="first" class="btn btn-success">
          <input type="radio"><span class="fa fa-fast-backward"></span>
        </label>
        <label id="previous" class="btn btn-success">
          <input type="radio"><span class="fa fa-step-backward"></span>
        </label>
        <label id="pause" class="btn btn-success">
          <input type="radio"><span class="fa fa-pause"></span>
        </label>
        <label id="play" class="btn btn-success active">
          <input type="radio" checked><span class="fa fa-play"></span>
        </label>
        <label id="next" class="btn btn-success">
          <input type="radio"><span class="fa fa-step-forward"></span>
        </label>
        <label id="last" class="btn btn-success">
          <input type="radio"><span class="fa fa-fast-forward"></span>
        </label>
      </div>
      <p><span class="badge badge-info"></span></p>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="js/bootstrap.js"></script>
<script>
  var total;
  function affichage() {
    var current = $('.carousel-item.active').index() + 1
    $('.badge').text(current + ' / '+ total)
  }
  $(function () {
    total = $('.carousel-item').length
    affichage()
    $('.carousel').carousel({ interval: 2000 })
    $('#first').click(function() { $('.carousel').carousel(0) })
    $('#previous').click(function() { $('.carousel').carousel('prev') })
    $('#pause').click(function() { $('.carousel').carousel('pause') })
    $('#play').click(function() { $('.carousel').carousel('cycle') })
    $('#next').click(function() { $('.carousel').carousel('next') })
    $('#last').click(function() { $('.carousel').carousel(total - 1) })
    $('.carousel').on('slid.bs.carousel', function () {
      affichage()
    })
  })
</script>

Tester en ligne

Pour déterminer le nombre de diapositives, on compte le nombre de fois où on trouve la classe carousel-item. Pour la diapositive en cours, on recherche la classe active.

En résumé

Le carrousel permet de faire défiler des images par substitution ou translation.
On peut ajouter une légende par image.
On peut ajouter des boutons de défilement et des indicateurs de l’image affichée.
On peut régler la vitesse de défilement.
Le plugin comporte des commandes utilisables avec jQuery et des événements qui permettent de commander efficacement l’affichage.

Bootstrap 4 : caroussel (Carousel)

Le principe

Des titres dans les images

Un indicateur-sélecteur de l’image affichée

Des boutons de défilement

Accessibilité

Rôles

Propriétés

Lecteur d’écran

Résumé pour les boutons de défilement

Activation avec Javascript

Cycle et pause

Autres commandes

Les événements

En résumé

Laisser un commentaire Annuler la réponse

Le principe

Des titres dans les images

Un indicateur-sélecteur de l’image affichée

Des boutons de défilement

Accessibilité

Rôles

Propriétés

Lecteur d’écran

Résumé pour les boutons de défilement

Activation avec Javascript

Cycle et pause

Autres commandes

Les événements

En résumé

Partager :

Laisser un commentaire Annuler la réponse