Bootstrap - Complemento de carrusel

El carrusel Bootstrap es una forma flexible y receptiva de agregar un control deslizante a su sitio. Además de ser receptivo, el contenido es lo suficientemente flexible como para permitir imágenes, iframes, videos o casi cualquier tipo de contenido que desee.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el carousel.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Ejemplo

Una simple presentación de diapositivas a continuación muestra un componente genérico para recorrer los elementos como un carrusel, usando el complemento de carrusel Bootstrap. Para implementar el carrusel, solo necesita agregar el código con el marcado. No hay necesidad de atributos de datos, simplemente desarrollo basado en clases.

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

Subtítulos opcionales

Puede agregar subtítulos a sus diapositivas fácilmente con el .carousel-caption elemento dentro de cualquier .item. Coloque casi cualquier HTML opcional allí y se alineará y formateará automáticamente. El siguiente ejemplo demuestra esto:

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

Uso

  • Via data attributes - Utilice atributos de datos para controlar fácilmente la posición del carrusel.

    • Atributo data-slideacepta las palabras clave anterior o siguiente , lo que altera la posición de la diapositiva en relación con su posición actual.

    • Utilizar data-slide-to para pasar un índice de diapositivas sin procesar al carrusel data-slide-to = "2", que cambia la posición de la diapositiva a un índice particular que comienza con 0.

    • los data-ride = "carousel" El atributo se utiliza para marcar un carrusel como una animación a partir de la carga de la página.

  • Via JavaScript - El carrusel se puede llamar manualmente con JavaScript como se muestra a continuación -

$('.carousel').carousel()

Opciones

Hay ciertas opciones que se pueden pasar a través de atributos de datos o JavaScript se enumeran en la siguiente tabla:

Nombre de opción Tipo / Valor predeterminado Nombre del atributo de datos Descripción
intervalo número predeterminado - 5000 intervalo de datos La cantidad de tiempo de demora entre el ciclo automático de un elemento. Si es falso, el carrusel no circulará automáticamente.
pausa cadena Predeterminado - "hover" pausa de datos Pausa el ciclo del carrusel en mouseenter y reanuda el ciclo del carrusel en mouseleave.
envolver booleano predeterminado - verdadero ajuste de datos Si el carrusel debe ciclar continuamente o tener paradas bruscas.

Métodos

Aquí hay una lista de métodos útiles que se pueden usar con el código carrusel.

Método Descripción Ejemplo
.carousel (opciones) Inicializa el carrusel con un objeto de opciones opcionales y comienza a recorrer los elementos. 
$('#identifier').carousel({
   interval: 2000
})
.carousel ('ciclo') Recorre los elementos del carrusel de izquierda a derecha. 
$('#identifier').carousel('cycle')
.carousel ('pausa') Evita que el carrusel recorra los elementos. 
$('#identifier')..carousel('pause')
.carousel (número) Cicla el carrusel a un fotograma en particular (basado en 0, similar a una matriz). 
$('#identifier').carousel(number)
.carousel ('anterior') Pasa al elemento anterior. 
$('#identifier').carousel('prev')
.carousel ('siguiente') Pasa al siguiente elemento. 
$('#identifier').carousel('next')

Ejemplo

El siguiente ejemplo demuestra el uso de métodos:

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

Eventos

La clase carrusel de Bootstrap expone dos eventos para conectarse a la funcionalidad del carrusel que se enumeran en la siguiente tabla.

Evento Descripción Ejemplo
slide.bs.carousel Este evento se activa inmediatamente cuando se invoca el método de instancia de diapositiva. 
$('#identifier').on('slide.bs.carousel', function () {
   // do something
})
slid.bs.carousel Este evento se activa cuando el carrusel ha completado su transición de diapositivas. 
$('#identifier').on('slid.bs.carousel', function () {
   // do something
})

Ejemplo

El siguiente ejemplo demuestra el uso de eventos:

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