Le carrousel Bootstrap

Le carrousel Bootstrap est un moyen souple et réactif d'ajouter un curseur sur votre site. En plus d'être réactif, le contenu est assez souple pour permettre les images, les iframes, les vidéos, ou n'importe quel type de contenu que vous pourriez vouloir.

Exemple :

Un diaporama simple ci-dessous montre un composant générique pour parcourir les éléments comme un carrousel, à l'aide du plugin carrousel Bootstrap. Pour implémenter le carrousel, il suffit d'ajouter le code avec le balisage. Il n'y a pas besoin d'attributs de données, simplement un développement simple basé sur une classe.

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

   <!-- Carousel indicators -->

   <ol class = "carousel-indicators">

      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>

      <li data-target = "#myCarousel" data-slide-to = "1"></li>

      <li data-target = "#myCarousel" data-slide-to = "2"></li>

   </ol>   

   <!-- Carousel items -->

   <div class = "carousel-inner">

      <div class = "item active">

         <img src = "/bootstrap/images/slide1.png" alt = "First slide">

      </div>

      <div class = "item">

         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">

      </div>

      <div class = "item">

         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">

      </div>

   </div>

   <!-- Carousel nav -->

   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>

   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>

</div> 

Légendes facultatives :

Vous pouvez ajouter des légendes à vos diapositives facilement avec l'élément .carousel-caption dans n'importe quel .item. Placez à peu près n'importe quel HTML facultatif à l'intérieur et il sera automatiquement aligné et formaté. L'exemple suivant illustre ceci –

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

   <!-- Carousel indicators -->

   <ol class = "carousel-indicators">

      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>

      <li data-target = "#myCarousel" data-slide-to = "1"></li>

      <li data-target = "#myCarousel" data-slide-to = "2"></li>

   </ol>   

   <!-- Carousel items -->

   <div class = "carousel-inner">

      <div class = "item active">

         <img src = "/bootstrap/images/slide1.png" alt = "First slide">

         <div class = "carousel-caption">This Caption 1</div>

      </div>

      <div class = "item">

         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">

         <div class = "carousel-caption">This Caption 2</div>

      </div>

      <div class = "item">

         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">

         <div class = "carousel-caption">This Caption 3</div>

      </div>

   </div>

   <!-- Carousel nav --> 

   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>

   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+

</div> 

Via des attributs de données - Utiliser des attributs de données pour contrôler facilement la position du carrousel.

• L'attribut data-slide accepte les mots-clés prev ou next, ce qui modifie la position du curseur par rapport à sa position actuelle.

• Utilisez data-slide-to pour passer un index de diapositive brut vers le carrousel data-slide-to = "2", ce qui déplace la position de diapositive à un index particulier commençant par 0.

• L'attribut data-ride = "carousel" est utilisé pour marquer un carrousel comme une animation à partir du chargement de la page.

• Via JavaScript - Le carrousel peut être appelé manuellement avec JavaScript comme ci-dessous –

$('.carousel').carousel()

Exemple :

L'exemple suivant illustre l'utilisation de méthodes :

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

   <!-- Carousel indicators -->

   <ol class = "carousel-indicators">

      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>

      <li data-target = "#myCarousel" data-slide-to = "1"></li>

      <li data-target = "#myCarousel" data-slide-to = "2"></li>

   </ol>   

   <!-- Carousel items -->

   <div class = "carousel-inner">

      <div class = "item active">

         <img src = "/bootstrap/images/slide1.png" alt = "First slide">

      </div>

      <div class = "item">

         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">

      </div>

      <div class = "item">

         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">

      </div>

   </div>

   <!-- Carousel nav -->

   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>

   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>

   <!-- Controls buttons -->

   <div style = "text-align:center;">

      <input type = "button" class = "btn prev-slide" value = "Previous Slide">

      <input type = "button" class = "btn next-slide" value = "Next Slide">

      <input type = "button" class = "btn slide-one" value = "Slide 1">

      <input type = "button" class = "btn slide-two" value = "Slide 2">            

      <input type = "button" class = "btn slide-three" value = "Slide 3">

   </div>

</div> 

<script>

   $(function() {

      // Cycles to the previous item

      $(".prev-slide").click(function() {

         $("#myCarousel").carousel('prev');

      });

      // Cycles to the next item

      $(".next-slide").click(function() {

         $("#myCarousel").carousel('next');

      });

      // Cycles the carousel to a particular frame 

      $(".slide-one").click(function() {

         $("#myCarousel").carousel(0);

      });

      $(".slide-two").click(function() {

         $("#myCarousel").carousel(1);

      });

      $(".slide-three").click(function() {

         $("#myCarousel").carousel(2);

      });

   });

</script>

<<<Précédent           Début