Bootstrap - Plugin Carousel

Le carrousel Bootstrap est un moyen flexible et réactif d'ajouter un curseur à votre site. En plus d'être réactif, le contenu est suffisamment flexible pour autoriser des images, des iframes, des vidéos ou à peu près tout type de contenu que vous pourriez souhaiter.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du carousel.js. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure le fichier bootstrap.js ou le bootstrap.min.js minifié .

Exemple

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

<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 facilement ajouter des légendes à vos diapositives avec le .carousel-caption élément dans tout .item. Placez à peu près n'importe quel code 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>

Usage

Via data attributes - Utilisez les attributs de données pour contrôler facilement la position du carrousel.
- Attribut data-slideaccepte les mots-clés précédent ou suivant , qui modifie la position de la diapositive par rapport à sa position actuelle.
- Utilisation data-slide-to pour passer un index de diapositive brut au carrousel data-slide-to = "2", qui décale la position de la diapositive vers un index particulier commençant par 0.
- le data-ride = "carousel" L'attribut 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()

Options

Il existe certaines options qui peuvent être transmises via des attributs de données ou JavaScript sont répertoriées dans le tableau suivant -

Nom de l'option	Type / Valeur par défaut	Nom d'attribut de données	La description
intervalle	nombre Par défaut - 5000	intervalle de données	Délai entre le cycle automatique d'un élément. Si faux, le carrousel ne fonctionnera pas automatiquement.
pause	string Default - "hover"	pause de données	Interrompt le cycle du carrousel sur mouseenter et reprend le cycle du carrousel sur souris.
emballage	booléen Valeur par défaut - true	enveloppe de données	Si le carrousel doit fonctionner en continu ou avoir des arrêts durs.

Méthodes

Voici une liste de méthodes utiles qui peuvent être utilisées avec du code carrousel.

Méthode	La description	Exemple
.carousel (options)	Initialise le carrousel avec un objet d'options facultatif et commence à parcourir les éléments.	`$('#identifier').carousel({ interval: 2000 })`
.carousel ('cycle')	Fait défiler les éléments du carrousel de gauche à droite.	`$('#identifier').carousel('cycle')`
.carousel ('pause')	Empêche le carrousel de parcourir les éléments.	`$('#identifier')..carousel('pause')`
.carousel (nombre)	Fait passer le carrousel à une image particulière (basée sur 0, similaire à un tableau).	`$('#identifier').carousel(number)`
.carousel ('précédent')	Passe à l'élément précédent.	`$('#identifier').carousel('prev')`
.carousel ('suivant')	Passe à l'élément suivant.	`$('#identifier').carousel('next')`

Exemple

L'exemple suivant montre l'utilisation des 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>

Événements

La classe carrousel de Bootstrap expose deux événements pour le raccordement à la fonctionnalité de carrousel qui sont répertoriés dans le tableau suivant.

un événement	La description	Exemple
slide.bs.carousel	Cet événement se déclenche immédiatement lorsque la méthode d'instance de diapositive est appelée.	`$('#identifier').on('slide.bs.carousel', function () { // do something })`
slid.bs.carousel	Cet événement est déclenché lorsque le carrousel a terminé sa transition de diapositive.	`$('#identifier').on('slid.bs.carousel', function () { // do something })`

Exemple

L'exemple suivant illustre l'utilisation des événements -

<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> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>