El componente Carrusel de Bootstrap
Un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel.
Cómo funciona el componente Carrusel
-
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.
prefers-reduced-motion. Consulta la sección de movimiento reducido de nuestra documentación de accesibilidad.
Ejemplos básicos del componente Carrusel
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".
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555"
dy=".3em">Primera diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444"
dy=".3em">Segunda diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333"
dy=".3em">Tercera diapositiva</text>
</svg>
</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 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.
<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">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555"
dy=".3em">Primera diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444"
dy=".3em">Segunda diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333"
dy=".3em">Tercera diapositiva</text>
</svg>
</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 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.
<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">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555"
dy=".3em">Primera diapositiva</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Primera etiqueta de diapositiva</h5>
<p>Algún contenido de marcador de posición representativo para la primera diapositiva.</p>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444"
dy=".3em">Segunda diapositiva</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Etiqueta de la segunda diapositiva</h5>
<p>Algún contenido de marcador de posición representativo para la segunda diapositiva.</p>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333"
dy=".3em">Tercera diapositiva</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Etiqueta de la tercera diapositiva</h5>
<p>Algún 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>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.
<div id="carouselExampleFade" class="carousel slide carousel-fade">
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555"
dy=".3em">Primera diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444"
dy=".3em">Segunda diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333"
dy=".3em">Tercera diapositiva</text>
</svg>
</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
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.
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555"
dy=".3em">Primera diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444"
dy=".3em">Segunda diapositiva</text>
</svg>
</div>
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333"
dy=".3em">Tercera diapositiva</text>
</svg>
</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 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.
<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
<div class="carousel-inner">
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555"
dy=".3em">Primera diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444"
dy=".3em">Segunda diapositiva</text>
</svg>
</div>
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333"
dy=".3em">Tercera diapositiva</text>
</svg>
</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 .carousel-item individual
Agrega data-bs-interval="" a un .carousel-item para cambiar la cantidad de tiempo de retraso entre cada paso automático al siguiente elemento.
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555"
dy=".3em">Primera diapositiva</text>
</svg>
</div>
<div class="carousel-item" data-bs-interval="2000">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444"
dy=".3em">Segunda diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333"
dy=".3em">Tercera diapositiva</text>
</svg>
</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 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.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555"
dy=".3em">Primera diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444"
dy=".3em">Segunda diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333"
dy=".3em">Tercera diapositiva</text>
</svg>
</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.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
<div class="carousel-inner">
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555"
dy=".3em">Primera diapositiva</text>
</svg>
</div>
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444"
dy=".3em">Segunda diapositiva</text>
</svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333"
dy=".3em">Tercera diapositiva</text>
</svg>
</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 del componente Carrusel
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.
.carousel-dark, establece data-bs-theme="dark" en el elemento raíz, un contenedor principal o el componente mismo.
<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">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Primera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#f5f5f5"></rect><text x="50%" y="50%" fill="#aaa"
dy=".3em">Primera diapositiva</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Primera etiqueta de diapositiva</h5>
<p>Algún contenido de marcador de posición representativo para la primera diapositiva.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Segunda diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#eee"></rect><text x="50%" y="50%" fill="#bbb"
dy=".3em">Segunda diapositiva</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Etiqueta de la segunda diapositiva</h5>
<p>Algún contenido de marcador de posición representativo para la segunda diapositiva.</p>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
role="img" aria-label="Marcador de posición: Tercera diapositiva" focusable="false"
preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<title>Marcador de posición</title>
<rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="50%" y="50%" fill="#999"
dy=".3em">Tercera diapositiva</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Etiqueta de la tercera diapositiva</h5>
<p>Algún 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 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).
Personalización del CSS del componente
Variables Sass generales relacionadas
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 del componente Carrusel
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 actualto: 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...
})