Carrusel

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, creado con transformaciones CSS 3D y un poco de JavaScript. Funciona con una serie de imágenes, texto o marcas personalizadas. También incluye soporte para controles e indicadores anteriores/siguientes.

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

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á compilando nuestro JavaScript desde la fuente, requiereutil.js .

Ejemplo

Los carruseles no normalizan automáticamente las dimensiones de las diapositivas. Como tal, es posible que deba usar 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.

Asegúrese de establecer una identificación única en los .carouselcontroles opcionales, especialmente si está utilizando varios carruseles en una sola página.

Solo diapositivas

Aquí hay un carrusel solo con diapositivas. Tenga en cuenta la presencia de .d-blocky .img-fluiden las imágenes del carrusel para evitar la alineación de imágenes predeterminada del navegador.

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

Con controles

Agregando los controles anterior y siguiente:

Anterior próximo

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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.

Anterior próximo

<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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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-captionelemento dentro de cualquier archivo .carousel-item. Se pueden ocultar fácilmente en ventanas de visualización más pequeñas, como se muestra a continuación, con utilidades de visualización opcionales . Los ocultamos inicialmente con .d-noney los recuperamos en dispositivos medianos con .d-md-block.

Etiqueta de la primera diapositiva

Nulla vitae elit libero, un pharetra augue mollis interdum.

Etiqueta de la segunda diapositiva

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiqueta de la tercera diapositiva

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Anterior próximo

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Uso

A través de atributos de datos

Utilice atributos de datos para controlar fácilmente la posición del carrusel. data-slideacepta 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-topara 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 usa para marcar un carrusel como animado a partir de la carga de la página. No se puede usar en combinación con la inicialización explícita de JavaScript (redundante e innecesaria) del mismo carrusel.

A través de JavaScript

Carrusel de llamadas 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="".

Métodos

.carousel(options)

Inicializa el carrusel con opciones opcionales objecty 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 pase de un elemento a otro.

.carousel(number)

Cicla el carrusel a un marco 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.carouselque 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.carouselque ocurra el evento).

.carousel('next')

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

.carousel('dispose')

Destruye el carrusel de un elemento.

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 (ya sea "left"o "right").
• relatedTarget: El elemento DOM que se desliza en su lugar como el elemento activo.
• from: El índice del elemento actual
• to: El índice del siguiente elemento

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

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