Carrusel

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

En esta página

Cómo funciona

El carrusel es una presentación de diapositivas para alternar a través de una serie de contenidos, construido con transformaciones 3D de CSS y un poco de JavaScript. Funciona con una serie de imágenes, texto o marcado personalizado. También incluye soporte para controles e indicadores de anterior/siguiente.
Por razones de rendimiento, los carruseles deben inicializarse manualmente utilizando el método constructor del carrusel. Sin la inicialización, algunos de los escuchadores de eventos (específicamente, los eventos necesarios para el soporte táctil/deslizamiento) no se registrarán hasta que un usuario haya activado explícitamente un control o indicador.

La única excepción son los carruseles de reproducción automática (autoplay) con el atributo data-bs-ride="carousel", ya que se inicializan automáticamente al cargar la página. Si estás utilizando carruseles de reproducción automática con el atributo de datos, no inicialices explícitamente los mismos carruseles con el método constructor.
Los carruseles anidados no son compatibles. También debes tener en cuenta que los carruseles en general a menudo pueden causar desafíos de usabilidad y accesibilidad.

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

Ejemplos básicos

Aquí tienes un ejemplo básico de un carrusel con tres diapositivas. Ten en cuenta los controles anterior/siguiente. Recomendamos usar elementos <button>, pero también puedes usar elementos <a> con role="button".

html

<div id="carouselExample" class="carousel slide">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Los carruseles no normalizan automáticamente las dimensiones de las diapositivas. Como tal, es posible que necesites utilizar utilidades adicionales o estilos personalizados para dimensionar el contenido de manera adecuada. Si bien los carruseles admiten controles e indicadores de anterior/siguiente, no son requeridos explícitamente. Agrega y personaliza según lo consideres conveniente.

Debes agregar la clase .active a una de las diapositivas, de lo contrario, el carrusel no será visible. Asegúrate también de establecer un id único en el .carousel para controles opcionales, especialmente si estás utilizando múltiples carruseles en una sola página. Los elementos de control e indicador deben tener un atributo data-bs-target (o href para enlaces) que coincida con el id del elemento .carousel.

Indicadores

Puedes agregar indicadores al carrusel, junto con los controles de anterior/siguiente. Los indicadores permiten a los usuarios saltar directamente a una diapositiva en particular.

html

<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Diapositiva 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Diapositiva 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Diapositiva 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Subtítulos

Puedes agregar subtítulos a tus diapositivas con el elemento .carousel-caption dentro de cualquier .carousel-item. Se pueden ocultar fácilmente en ventanas gráficas (viewports) más pequeñas, como se muestra a continuación, con utilidades de visualización (display utilities) opcionales. Los ocultamos inicialmente con .d-none y los traemos de vuelta en dispositivos medianos con .d-md-block.

Etiqueta de la primera diapositiva

Contenido de marcador de posición representativo para la primera diapositiva.

Etiqueta de la segunda diapositiva

Contenido de marcador de posición representativo para la segunda diapositiva.

Etiqueta de la tercera diapositiva

Contenido de marcador de posición representativo para la tercera diapositiva.

html

<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Diapositiva 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Diapositiva 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Diapositiva 3"></button>
  </div>
  <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>Etiqueta de la primera diapositiva</h5>
        <p>Contenido de marcador de posición representativo para la primera diapositiva.</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>Etiqueta de la segunda diapositiva</h5>
        <p>Contenido de marcador de posición representativo para la segunda diapositiva.</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>Etiqueta de la tercera diapositiva</h5>
        <p>Contenido de marcador de posición representativo para la tercera diapositiva.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Desvanecimiento cruzado (crossfade)

Agrega .carousel-fade a tu carrusel para animar las diapositivas con una transición de desvanecimiento en lugar de una diapositiva deslizante. Dependiendo del contenido de tu carrusel (por ejemplo, diapositivas de solo texto), es posible que desees agregar .bg-body o algún CSS personalizado a los .carousel-item para un desvanecimiento cruzado adecuado.

html

<div id="carouselExampleFade" class="carousel slide carousel-fade">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Carruseles de reproducción automática (autoplay)

Puedes hacer que tus carruseles se reproduzcan automáticamente al cargar la página estableciendo la opción ride en carousel. Los carruseles de reproducción automática se pausan automáticamente cuando se pasa el cursor sobre ellos. Este comportamiento se puede controlar con la opción pause. En los navegadores que admiten la API de visibilidad de página (Page Visibility API), el carrusel dejará de ciclar cuando la página web no sea visible para el usuario (como cuando la pestaña del navegador está inactiva o cuando la ventana del navegador está minimizada).

Por razones de accesibilidad, recomendamos evitar el uso de carruseles de reproducción automática. Si tu página incluye un carrusel de reproducción automática, recomendamos proporcionar un botón o control adicional para pausar/detener explícitamente el carrusel.

Consulta el Criterio de éxito de WCAG 2.2 2.2.2 Pausar, Detener, Ocultar.

html

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Cuando la opción ride se establece en true, en lugar de carousel, el carrusel no comenzará a ciclar automáticamente al cargar la página. En su lugar, solo comenzará después de la primera interacción del usuario.

html

<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Intervalo individual de `.carousel-item`

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

html

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Carruseles de reproducción automática sin controles

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

html

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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>

Desactivar el deslizamiento táctil

Los carruseles admiten deslizar hacia la izquierda o hacia la derecha en dispositivos con pantalla táctil para moverse entre diapositivas. Esto se puede deshabilitar configurando la opción touch en false.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Variante oscura

Obsoleto en v5.3.0

Agrega .carousel-dark al .carousel para obtener controles, indicadores y subtítulos más oscuros. Los controles se invierten en comparación con su relleno blanco predeterminado con la propiedad CSS filter. Los subtítulos y los controles tienen variables Sass adicionales que personalizan el color y el background-color.

¡Atención! Las variantes oscuras para los componentes quedaron obsoletas en v5.3.0 con la introducción de los modos de color. En lugar de agregar .carousel-dark, establece data-bs-theme="dark" en el elemento root, un contenedor padre o el propio componente.

Etiqueta de la primera diapositiva

Contenido de marcador de posición representativo para la primera diapositiva.

Etiqueta de la segunda diapositiva

Contenido de marcador de posición representativo para la segunda diapositiva.

Etiqueta de la tercera diapositiva

Contenido de marcador de posición representativo para la tercera diapositiva.

html

<div id="carouselExampleDark" class="carousel carousel-dark slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Diapositiva 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Diapositiva 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Diapositiva 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Etiqueta de la primera diapositiva</h5>
        <p>Contenido de marcador de posición representativo para la primera diapositiva.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Etiqueta de la segunda diapositiva</h5>
        <p>Contenido de marcador de posición representativo para la segunda diapositiva.</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>Etiqueta de la tercera diapositiva</h5>
        <p>Contenido de marcador de posición representativo para la tercera diapositiva.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Transición personalizada

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

CSS

Variables de Sass

Variables para todos los carruseles:

scss/_variables.scss

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;
$carousel-control-icon-filter:       null;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Variables para el carrusel oscuro:

scss/_variables.scss

$carousel-dark-indicator-active-bg:  $black; // Deprecated in v5.3.4
$carousel-dark-caption-color:        $black; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter:  invert(1) grayscale(100); // Deprecated in v5.3.4

Uso

A través de atributos de datos

Utiliza atributos de datos para controlar fácilmente la posición del carrusel. data-bs-slide acepta las palabras clave prev or next, que modifican la posición de la diapositiva en relación con su posición actual. Alternativamente, utiliza data-bs-slide-to para pasar un índice de diapositiva sin formato al carrusel data-bs-slide-to="2", que cambia la posición de la diapositiva a un índice en particular que comienza con 0.

A través de JavaScript

Llama al carrusel manualmente con:

const carousel = new bootstrap.Carousel('#myCarousel')

Opciones

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puedes añadir un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de mayúsculas y minúsculas del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. Por ejemplo, usa data-bs-custom-class="beautifier" en lugar de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos los componentes admiten un atributo de datos reservado experimental data-bs-config que puede albergar una configuración simple del componente como una cadena JSON. Cuando un elemento tiene los atributos data-bs-config='{"delay":0, "title":123}' y data-bs-title="456", el valor final de title será 456 y los atributos de datos separados anularán los valores proporcionados en data-bs-config. Además, los atributos de datos existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado fusionado de data-bs-config, data-bs- y el js object (objeto js) donde el último par clave-valor proporcionado anula a los demás.

Nombre	Tipo	Predeterminado	Descripción
`interval`	number	`5000`	La cantidad de tiempo de retraso entre el ciclo automático de un elemento.
`keyboard`	boolean	`true`	Si el carrusel debe reaccionar a los eventos del teclado.
`pause`	string, boolean	`"hover"`	Si se establece en `"hover"`, pausa el ciclo del carrusel en el evento `mouseenter` y lo reanuda en el evento `mouseleave`. Si se establece en `false`, pasar el cursor sobre el carrusel no lo pausará. En dispositivos táctiles, cuando se establece en `"hover"`, el ciclo se pausará en `touchend` (una vez que el usuario termine de interactuar con el carrusel) durante dos intervalos, antes de reanudarse automáticamente. Esto es adicional al comportamiento del mouse.
`ride`	string, boolean	`false`	Si se establece en `true`, reproduce automáticamente el carrusel después de que el usuario cicle manualmente el primer elemento. Si se establece en `"carousel"`, reproduce automáticamente el carrusel al cargar la página.
`touch`	boolean	`true`	Si el carrusel debe admitir interacciones de deslizamiento hacia la izquierda/derecha en dispositivos con pantalla táctil.
`wrap`	boolean	`true`	Si el carrusel debe ciclar continuamente o tener paradas bruscas.

Métodos

Todos los métodos de la API son asíncronos e inician una transición. Devuelven el control al llamador tan pronto como se inicia la transición, pero antes de que termine. Además, se ignorará cualquier llamada a un método en un componente en transición. Más información en nuestra documentación de JavaScript.

Activa tu contenido como un elemento colapsable. Acepta un object de opciones opcional.

Puedes crear una instancia de carrusel con el constructor de carrusel y pasar cualquier opción adicional. Por ejemplo, para inicializar manualmente un carrusel de reproducción automática (asumiendo que no estás usando el atributo data-bs-ride="carousel" en el marcado en sí) con un intervalo específico y con el soporte táctil deshabilitado, puedes usar:

const myCarouselElement = document.querySelector('#myCarousel')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})

Método	Descripción
`cycle`	Comienza a ciclar a través de los elementos del carrusel de izquierda a derecha.
`dispose`	Destruye el carrusel de un elemento. (Elimina los datos almacenados en el elemento DOM)
`getInstance`	Método estático que te permite obtener la instancia de carrusel asociada a un elemento DOM. Puedes usarlo así: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Método estático que devuelve una instancia de carrusel asociada a un elemento DOM, o crea una nueva en caso de que no haya sido inicializada. Puedes usarlo así: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Cicla al siguiente elemento. Devuelve el control al llamador antes de que se haya mostrado el siguiente elemento (por ejemplo, antes de que ocurra el evento `slid.bs.carousel`).
`nextWhenVisible`	No cicla el carrusel al siguiente elemento cuando la página, el carrusel o el padre del carrusel no son visibles. Devuelve el control al llamador antes de que se haya mostrado el elemento de destino.
`pause`	Detiene el ciclo del carrusel a través de los elementos.
`prev`	Cicla al elemento anterior. Devuelve el control al llamador antes de que se haya mostrado el elemento anterior (por ejemplo, antes de que ocurra el evento `slid.bs.carousel`).
`to`	Cicla el carrusel a un fotograma en particular (basado en 0, similar a un array). Devuelve el control al llamador antes de que se haya mostrado el elemento de destino (por ejemplo, antes de que ocurra el evento `slid.bs.carousel`).

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 está deslizando a su lugar como el elemento activo.
from: El índice del elemento actual.
to: El índice del siguiente elemento.

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

Tipo de evento	Descripción
`slid.bs.carousel`	Se dispara cuando el carrusel ha completado su transición de deslizamiento.
`slide.bs.carousel`	Se dispara inmediatamente cuando se invoca el método de instancia `slide`.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // hacer algo...
})

Carrusel

¿Te gustó esta traducción?

Cómo funciona

Ejemplos básicos

Indicadores

Subtítulos

Etiqueta de la primera diapositiva

Etiqueta de la segunda diapositiva

Etiqueta de la tercera diapositiva

Desvanecimiento cruzado (crossfade)

Carruseles de reproducción automática (autoplay)

Intervalo individual de .carousel-item

Carruseles de reproducción automática sin controles

Desactivar el deslizamiento táctil

Variante oscura

Etiqueta de la primera diapositiva

Etiqueta de la segunda diapositiva

Etiqueta de la tercera diapositiva

Transición personalizada

CSS

Variables de Sass

Uso

A través de atributos de datos

A través de JavaScript

Opciones

Métodos

Eventos

Intervalo individual de `.carousel-item`