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, 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 en los que se admite la API de visibilidad de página , el carrusel evitará que se deslice cuando la página web no esté 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-motionconsulta 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.

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.

La .activeclase debe agregarse a una de las diapositivas ; de lo contrario, el carrusel no será visible. También asegúrese de establecer un único iden los .carouselcontroles opcionales, especialmente si está utilizando varios carruseles en una sola página. Los elementos de control e indicadores deben tener un data-bs-targetatributo (o hrefpara enlaces) que coincida con el iddel .carouselelemento.

Solo diapositivas

Aquí hay un carrusel solo con diapositivas. Tenga en cuenta la presencia de .d-blocky .w-100en 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>

Con controles

Agregar los controles anterior y siguiente. Recomendamos usar <button>elementos, pero también puede usar <a>elementos con role="button".

html

<div id="carouselExampleControls" 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="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Con indicadores

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

html

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

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

Algún contenido de marcador de posición representativo para la primera diapositiva.

Etiqueta de la segunda diapositiva

Algún contenido de marcador de posición representativo para la segunda diapositiva.

Etiqueta de la tercera diapositiva

Algo de contenido de marcador de posición representativo para la tercera diapositiva.

html

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

Fundido cruzado

Agregue .carousel-fadea su carrusel para animar diapositivas con una transición de fundido en lugar de una diapositiva. Dependiendo del contenido de su carrusel (p. ej., diapositivas de solo texto), es posible que desee agregar .bg-bodyo algún CSS personalizado a las .carousel-items para un fundido cruzado adecuado.

html

<div id="carouselExampleFade" class="carousel slide carousel-fade" 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="#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>

`.carousel-item`Intervalo individual

Agregue data-bs-interval=""a .carousel-itempara 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">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>

Desactivar 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 usando el data-bs-touchatributo. El siguiente ejemplo tampoco incluye el data-bs-rideatributo, por lo que no se reproduce automáticamente.

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

Agregue .carousel-darka los .carouselcontroles, indicadores y subtítulos más oscuros. Los controles se han invertido de su relleno blanco predeterminado con la filterpropiedad CSS. Los subtítulos y los controles tienen variables Sass adicionales que personalizan el colory background-color.

Etiqueta de la primera diapositiva

Algún contenido de marcador de posición representativo para la primera diapositiva.

Etiqueta de la segunda diapositiva

Algún contenido de marcador de posición representativo para la segunda diapositiva.

Etiqueta de la tercera diapositiva

Algo de contenido de marcador de posición representativo para la tercera diapositiva.

html

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <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 .carousel-itemse puede cambiar con la $carousel-transition-durationvariable Sass antes de compilar o estilos personalizados si está utilizando el CSS compilado. Si se aplican varias transiciones, asegúrese de definir primero la transición de transformación (p. ej transition: transform 2s ease, opacity .5s ease-out., ).

Hablar con descaro a

Variables

Variables para todos los carruseles:

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

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Uso

A través de atributos de datos

Utilice atributos de datos para controlar fácilmente la posición del carrusel. data-bs-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-bs-slide-topara pasar un índice de diapositiva sin procesar al carrusel data-bs-slide-to="2", que cambia la posición de la diapositiva a un índice particular que comienza con 0.

El data-bs-ride="carousel"atributo se usa para marcar un carrusel como animado a partir de la carga de la página. Si no usa data-bs-ride="carousel"para inicializar su carrusel, debe inicializarlo usted mismo. 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:

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

Opciones

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puede agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrese 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, use 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 reservados experimentaldata-bs-config que puede albergar una configuración de componente simple como una cadena JSON. Cuando un elemento tiene atributos data-bs-config='{"delay":0, "title":123}'y , el valor final será y los atributos de datos separados anularán los valores dados en . Además, los atributos de datos existentes pueden albergar valores JSON como .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Nombre	Escribe	Defecto	Descripción
`interval`	número	`5000`	La cantidad de tiempo de retraso entre el ciclo automático de un elemento.
`keyboard`	booleano	`true`	Si el carrusel debe reaccionar a los eventos del teclado.
`pause`	cadena, booleano	`"hover"`	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 pausará. En los dispositivos táctiles, cuando se establece en `"hover"`, el ciclo se detendrá `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 ratón.
`ride`	cadena, booleano	`false`	Si se establece en `true`, reproduce automáticamente el carrusel después de que el usuario cicla manualmente el primer elemento. Si se establece en `"carousel"`, reproduce automáticamente el carrusel al cargar.
`touch`	booleano	`true`	Si el carrusel debe admitir interacciones de deslizamiento hacia la izquierda/derecha en dispositivos con pantalla táctil.
`wrap`	booleano	`true`	Si el carrusel debe circular continuamente o tener paradas bruscas.

Métodos

Transiciones y métodos asíncronos

Todos los métodos de API son asíncronos 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 de método en un componente en transición .

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

Puede crear una instancia de carrusel con el constructor de carrusel, por ejemplo, para inicializar con opciones adicionales y comenzar a recorrer elementos:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

Método	Descripción
`cycle`	Recorre 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 le permite obtener la instancia de carrusel asociada a un elemento DOM, puede 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 se haya inicializado. Puedes usarlo así: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Pasa al elemento siguiente. Vuelve a la persona que llama antes de que se muestre el siguiente elemento (por ejemplo, antes de `slid.bs.carousel`que ocurra el evento).
`nextWhenVisible`	No cambie el carrusel al siguiente cuando la página no está visible o el carrusel o su elemento primario no están visibles. Vuelve a la persona que llama antes de que se haya mostrado el elemento de destino .
`pause`	Evita que el carrusel pase de un elemento a otro.
`prev`	Pasa al elemento anterior. Vuelve a la persona que llama antes de que se haya mostrado el elemento anterior (por ejemplo, antes de `slid.bs.carousel`que ocurra el evento).
`to`	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 (por ejemplo, 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 (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">).

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

const myCarousel = document.getElementById('myCarousel')

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

Carrusel

Cómo funciona

Ejemplo

Solo diapositivas

Con controles

Con indicadores

con subtítulos

Etiqueta de la primera diapositiva

Etiqueta de la segunda diapositiva

Etiqueta de la tercera diapositiva

Fundido cruzado

.carousel-itemIntervalo individual

Desactivar deslizamiento táctil

variante oscura

Etiqueta de la primera diapositiva

Etiqueta de la segunda diapositiva

Etiqueta de la tercera diapositiva

Transición personalizada

Hablar con descaro a

Variables

Uso

A través de atributos de datos

A través de JavaScript

Opciones

Métodos

Transiciones y métodos asíncronos

Eventos

`.carousel-item`Intervalo individual