Saltar al contenido principal Saltar a la navegación de la documentación
Ver en GitHub

Carrusel

Un componente de presentación de diapositivas para recorrer 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 recorrer una serie de contenido, creada 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.

  • Por razones de rendimiento, los carruseles deben inicializarse manualmente usando el método constructor de carrusel. Sin inicialización, algunos de los detectores de eventos (específicamente, los eventos que necesitan soporte táctil/deslizante) 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 con el atributo data-bs-ride="carousel" ya que se inicializan automáticamente al cargar la página. Si utilizas 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 problemas de usabilidad y accesibilidad.

El efecto de animación de este componente depende de la media query prefers-reduced-motion. Consulta la sección de movimiento reducido de 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 anteriores/siguientes. 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">Previous</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">Next</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 adecuadamente el contenido. Si bien los carruseles admiten controles e indicadores anteriores y siguientes, no son necesarios explícitamente. Agrega y personaliza como mejor te parezca.

Debes agregar la clase .active a una de las diapositivas, de lo contrario el carrusel no será visible. También asegúrate de establecer un id único en .carousel para controles opcionales, especialmente si estás utilizando varios 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 .carousel.

Indicadores

Puedes agregar indicadores al carrusel, junto con los controles 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="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 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">Previous</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">Next</span>
  </button>
</div>

Subtítulos

Puedes agregar títulos a tus diapositivas con el elemento .carousel-caption dentro de cualquier .carousel-item. Se pueden ocultar fácilmente en viewports más pequeñas, como se muestra a continuación, con utilidades de visualización opcionales. Los ocultamos inicialmente con .d-none y los recuperamos en dispositivos de tamaño mediano con .d-md-block.

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="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 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>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</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">Previous</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">Next</span>
  </button>
</div>

Crossfade

Agrega .carousel-fade a tu carrusel para animar diapositivas con una transición de desvanecimiento en lugar de un desplazamiento. Dependiendo del contenido de su carrusel (por ejemplo, diapositivas de solo texto), es posible que desees agregar .bg-body o algún CSS personalizado a los .carousel-item para lograr un fundido 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">Previous</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">Next</span>
  </button>
</div>

Carruseles de reproducción automática

Puedes hacer que tus carruseles se reproduzcan automáticamente al cargar la página configurando la opción ride en carousel. Los carruseles de reproducción automática se detienen automáticamente mientras se pasa el mouse. Este comportamiento se puede controlar con la opción pause. En los navegadores que admiten la API de visibilidad de página, el carrusel dejará de funcionar 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, te recomendamos proporcionar un botón o control adicional para pausar/detener explícitamente el carrusel.

Ver WCAG 2.1 Criterio de éxito 2.2.2 Pausa, 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">Previous</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">Next</span>
  </button>
</div>

Cuando la opción ride está configurada en true, en lugar de carousel, el carrusel no comenzará a circular automáticamente al cargar la página. En cambio, 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">Previous</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">Next</span>
  </button>
</div>

Agrega data-bs-interval="" a un .carousel-item para cambiar la cantidad de tiempo de retraso entre cada paso 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">Previous</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">Next</span>
  </button>
</div>

Carruseles de reproducción automática sin controles

Aquí tienes un carrusel solo con diapositivas. Ten en cuenta la presencia de .d-block y .w-100 en las imágenes del carrusel para evitar la alineación de imágenes 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 el dedo hacia la izquierda o hacia la derecha en dispositivos con pantalla táctil para pasar de una diapositiva a otra. Esto se puede desactivar 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">Previous</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">Next</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 títulos y controles tienen variables Sass adicionales que personalizan el color y el background-color.

¡Atención! Las variantes oscuras para componentes quedaron obsoletas en la versión 5.3.0 con la introducción de modos de color. En lugar de agregar .carousel-dark, establece data-bs-theme="dark" en el elemento raíz, un contenedor principal o el componente mismo.

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="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 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>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</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>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</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">Previous</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">Next</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 estilos personalizados si estás utilizando el CSS compilado. Si se aplican varias transiciones, asegúrate de que la transición de transformación esté definida primero (por ejemplo, transition: transform 2s ease, opacity .5s ease-out).

CSS

Variables 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-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 0z'/></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-.708z'/></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;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Uso

Vía atributos de datos

Utiliza atributos de datos para controlar fácilmente la posición del carrusel. data-bs-slide acepta las palabras clave prev o next, que alteran la posición de la diapositiva en relación con su posición actual. Alternativamente, usa 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 particular que comienza con 0.

Vía 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 agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de caso del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. Por ejemplo, utiliza 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 experimental reservado data-bs-config que puede albergar datos simples de configuración 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 sobrescribirá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 combinado de data-bs-config, data-bs- y js object donde el último valor-clave dado sobrescribe los demás.

Nombre Tipo Predeterminado Descripción
interval número 5000 La cantidad de tiempo que se debe demorar 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 configura en "hover", pausa el ciclo del carrusel en mouseenter y reanuda el ciclo del carrusel en mouseleave. Si se establece en false, al pasar el cursor sobre el carrusel no se detendrá. En dispositivos táctiles, cuando se configura en "hover", el ciclo se detendrá en touchend (una vez que el usuario termine de interactuar con el carrusel) durante dos intervalos, antes de reanudarse automáticamente. Esto se suma al comportamiento del mouse.
ride string, boolean false Si se establece en true, el carrusel se reproduce automáticamente después de que el usuario recorre manualmente el primer elemento. Si se establece en "carousel", reproduce automáticamente el carrusel al cargar.
touch boolean true Si el carrusel debe admitir interacciones de deslizamiento hacia la izquierda o hacia la derecha en dispositivos con pantalla táctil.
wrap boolean true Si el carrusel debe realizar ciclos continuos o tener paradas bruscas.

Métodos

Todos los métodos API son asincrónicos e inician una transición. Regresan al punto de la llamada 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. Obtén más información en nuestra documentación de JavaScript.

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 (suponiendo que no esté usando el atributo data-bs-ride="carousel" en el marcado en sí) con un intervalo específico y con la compatibilidad táctil deshabilitada, puedes usar:

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

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})
Método Descripción
cycle Comienza a recorrer 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 del 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 Pasa al siguiente elemento. Vuelve al punto de la llamada antes de que se muestre el siguiente elemento (por ejemplo, antes de que ocurra el evento slid.bs.carousel).
nextWhenVisible No pases del carrusel al siguiente cuando la página, el carrusel o el padre del carrusel no estén visibles. Vuelve al punto de la llamada antes de que se haya mostrado el elemento de destino.
pause Evita que el carrusel recorra los elementos.
prev Vuelve al elemento anterior. Vuelve al punto de la llamada 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 cuadro particular (basado en 0, similar a una matriz). Vuelve al punto de la llamada 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 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 activan en el propio carrusel (es decir, en el <div class="carousel">).

Tipo de evento Descripción
slid.bs.carousel Se activa cuando el carrusel ha completado su transición de diapositivas.
slide.bs.carousel Se activa inmediatamente cuando se invoca el método de instancia slide. 
const myCarousel = document.getElementById('myCarousel')

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