Carousel

Un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel.

Cómo funciona

El carrusel es una presentación de diapositivas para recorrer una serie de contenido, construido con transformaciones CSS 3D y un poco de JavaScript. Funciona con una serie de imágenes, texto o marcado personalizado. También incluye soporte para controles e indicadores anteriores / siguientes.

En los navegadores donde se admite la API de visibilidad de la página , el carrusel evitará que se deslice cuando la página web no es visible para el usuario (como cuando la pestaña del navegador está inactiva, la ventana del navegador está minimizada, etc.).

El efecto de animación de este componente depende de la prefers-reduced-motion consulta de medios. Consulte la sección de movimiento reducido de nuestra documentación de accesibilidad .

Tenga en cuenta que los carruseles anidados no son compatibles y, por lo general, los carruseles no cumplen con los estándares de accesibilidad.

Por último, si está construyendo nuestro JavaScript desde la fuente, requiere util.js .

Ejemplo

Los carruseles no normalizan automáticamente las dimensiones de las diapositivas. Como tal, es posible que deba utilizar utilidades adicionales o estilos personalizados para dimensionar el contenido de manera adecuada. Si bien los carruseles admiten controles e indicadores anteriores / siguientes, no se requieren explícitamente. Agregue y personalice como mejor le parezca.

La .active clase debe agregarse a una de las diapositivas, de lo contrario, el carrusel no será visible. También asegúrese de establecer una identificación única en los .carousel controles opcionales, especialmente si está utilizando varios carruseles en una sola página. Los elementos de control e indicador deben tener un data-target atributo (o href para enlaces) que coincida con el id del .carousel elemento.

Solo diapositivas

Aquí hay un carrusel con solo diapositivas. Tenga en cuenta la presencia de .d-block y .w-100 en las imágenes del carrusel para evitar la alineación de la imagen predeterminada del navegador. 


  <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
          <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

Con controles

Añadiendo los controles anterior y siguiente: 


  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Con indicadores

También puede agregar los indicadores al carrusel, junto con los controles. 


  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Con subtítulos

Agregue subtítulos a sus diapositivas fácilmente con el .carousel-caption elemento dentro de cualquiera .carousel-item . Se pueden ocultar fácilmente en ventanas gráficas más pequeñas, como se muestra a continuación, con utilidades de visualización opcionales. Los ocultamos inicialmente con .d-none y los traemos de vuelta en dispositivos de tamaño mediano con .d-md-block. 


  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Fundido cruzado

Agregue .carousel-fade a su carrusel para animar diapositivas con una transición de fundido en lugar de una diapositiva. 


  <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Agregue data-interval="" a .carousel-item para cambiar la cantidad de tiempo de demora entre el ciclo automático al siguiente elemento. 


  <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active" data-interval="10000">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item" data-interval="2000">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Uso

A través de atributos de datos

Utilice atributos de datos para controlar fácilmente la posición del carrusel. data-slide acepta las palabras clave prevo next , que altera la posición de la diapositiva en relación con su posición actual. Alternativamente, use data-slide-to para pasar un índice de diapositiva sin procesar al carrusel data-slide-to="2" , que cambia la posición de la diapositiva a un índice particular que comienza con 0.

El data-ride="carousel" atributo se utiliza para marcar un carrusel como animado a partir de la carga de la página. Si no lo utiliza data-ride="carousel" para inicializar su carrusel, debe inicializarlo usted mismo. No se puede utilizar en combinación con la inicialización de JavaScript explícita (redundante e innecesaria) del mismo carrusel.

Vía JavaScript

Llame al carrusel manualmente con: 


    $('.carousel').carousel()

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-interval="".

Nombre Tipo Defecto Descripción
intervalo número 5000 La cantidad de tiempo de demora entre el ciclo automático de un elemento. Si es falso, el carrusel no circulará automáticamente.
teclado booleano cierto Si el carrusel debe reaccionar a los eventos del teclado.
pausa cadena | booleano "flotar"

Si se establece en "hover" , detiene el ciclo del carrusel mouseenter y reanuda el ciclo del carrusel mouseleave . Si se establece en false , pasar el cursor sobre el carrusel no lo detendrá.

En los dispositivos táctiles, cuando se configura en "hover" , el ciclismo se detendrá touchend (una vez que el usuario termine de interactuar con el carrusel) durante dos intervalos, antes de reanudar automáticamente. Tenga en cuenta que esto se suma al comportamiento del mouse anterior.

paseo cuerda falso Reproduce automáticamente el carrusel después de que el usuario cicla manualmente el primer elemento. Si es "carrusel", reproduce automáticamente el carrusel en carga.
envolver booleano cierto Si el carrusel debe ciclar continuamente o tener paradas bruscas.
toque booleano cierto Si el carrusel debe admitir interacciones de deslizamiento hacia la izquierda / derecha en dispositivos con pantalla táctil.

Métodos

Transiciones y métodos asincrónicos

Todos los métodos API son asincrónicos e inician una transición . Vuelven a la persona que llama tan pronto como se inicia la transición, pero antes de que finalice . Además, se ignorará una llamada a un método en un componente en transición.

Consulte nuestra documentación de JavaScript para obtener más información .

.carousel(options)

Inicializa el carrusel con opciones opcionales object y comienza a recorrer los elementos. 


  $('.carousel').carousel({
    interval: 2000
  })

.carousel('cycle')

Recorre los elementos del carrusel de izquierda a derecha.

.carousel('pause')

Evita que el carrusel recorra los elementos.

.carousel(number)

Cicla el carrusel a un fotograma en particular (basado en 0, similar a una matriz). Vuelve a la persona que llama antes de que se haya mostrado el elemento de destino (es decir, antes de slid.bs.carousel que ocurra el evento).

.carousel('prev')

Pasa al elemento anterior. Vuelve a la persona que llama antes de que se haya mostrado el elemento anterior (es decir, antes de slid.bs.carousel que ocurra el evento).

.carousel('next')

Pasa al siguiente elemento. Vuelve a la persona que llama antes de que se muestre el siguiente elemento (es decir, antes de slid.bs.carousel que ocurra el evento).

.carousel('dispose')

Destruye el carrusel de un elemento.

.carousel('nextWhenVisible')

No cambie el carrusel al siguiente cuando la página no esté visible o el carrusel o su padre no estén visibles. Vuelve a la persona que llama antes de que se muestre el siguiente elemento (es decir, antes de slid.bs.carousel que ocurra el evento).

.carousel('to')

Cicla el carrusel a un fotograma en particular (basado en 0, similar a una matriz). Vuelve a la persona que llama antes de que se muestre el siguiente elemento (es decir, antes de slid.bs.carousel que ocurra el evento).

Eventos

La clase de carrusel de Bootstrap expone dos eventos para conectarse a la funcionalidad del carrusel. Ambos eventos tienen las siguientes propiedades adicionales:

  • direction : La dirección en la que se desliza el carrusel ( "left" o "right" ).
  • relatedTarget : El elemento DOM que se desliza en su lugar como elemento activo.
  • from: El índice del elemento actual
  • to: El índice del siguiente elemento

Todos los eventos del carrusel se disparan en el propio carrusel (es decir, en el <div class="carousel"> ).

Tipo de evento Descripción
slide.bs.carousel Este evento se activa inmediatamente cuando slide se invoca el método de instancia.
slid.bs.carousel Este evento se activa cuando el carrusel ha completado su transición de diapositivas. 

  $('#myCarousel').on('slide.bs.carousel', function () {
    // do something...
  })

Cambiar la duración de la transición

La duración de la transición de .carousel-item se puede cambiar con la $carousel-transition variable Sass antes de compilar o estilos personalizados si está utilizando el CSS compilado. Si se aplican varias transiciones, asegúrese de que la transición de transformación se defina primero (por ejemplo transition: transform 2s ease, opacity .5s ease-out ).