Carrusel
Un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel.
Cómo funciona
El carrusel es una presentación de diapositivas para recorrer una serie de contenido, creado con transformaciones CSS 3D y un poco de JavaScript. Funciona con una serie de imágenes, texto o marcas personalizadas. También incluye soporte para controles e indicadores anteriores/siguientes.
En los navegadores que admiten la API de visibilidad de la página , el carrusel evitará que se deslice cuando la página web no esté visible para el usuario (por ejemplo, cuando la pestaña del navegador esté inactiva, la ventana del navegador esté minimizada, etc.).
prefers-reduced-motion
consulta 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.
Por último, si está compilando nuestro JavaScript desde la fuente, requiereutil.js
.
Ejemplo
Los carruseles no normalizan automáticamente las dimensiones de las diapositivas. Como tal, es posible que deba usar utilidades adicionales o estilos personalizados para dimensionar el contenido de manera adecuada. Si bien los carruseles admiten controles e indicadores anteriores/siguientes, no se requieren explícitamente. Agregue y personalice como mejor le parezca.
La .active
clase debe agregarse a una de las diapositivas ; de lo contrario, el carrusel no será visible. También asegúrese de establecer un único id
en los .carousel
controles opcionales, especialmente si está utilizando varios carruseles en una sola página. Los elementos de control e indicadores deben tener un data-target
atributo (o href
para enlaces) que coincida con el id
del .carousel
elemento.
Solo diapositivas
Aquí hay un carrusel solo con diapositivas. Tenga 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-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"
.
<div id="carouselExampleControls" class="carousel slide" data-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-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Con indicadores
También puede agregar los indicadores al carrusel, junto con los controles.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img 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-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
con subtítulos
Agregue subtítulos a sus diapositivas fácilmente con el .carousel-caption
elemento 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-none
y los recuperamos en dispositivos medianos con .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Fundido cruzado
Agregue .carousel-fade
a 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-body
o algún CSS personalizado a las .carousel-item
s para un fundido cruzado adecuado.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
.carousel-item
Intervalo individual
Agregue data-interval=""
a .carousel-item
para cambiar la cantidad de tiempo de retraso entre el ciclo automático al siguiente elemento.
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-touch
atributo. El siguiente ejemplo tampoco incluye el data-ride
atributo y tiene data-interval="false"
, por lo que no se reproduce automáticamente.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Uso
A través de atributos de datos
Utilice atributos de datos para controlar fácilmente la posición del carrusel. data-slide
acepta las palabras clave prev
o next
, que altera la posición de la diapositiva en relación con su posición actual. Alternativamente, use data-slide-to
para pasar un índice de diapositiva sin procesar al carrusel data-slide-to="2"
, que cambia la posición de la diapositiva a un índice particular que comienza con 0
.
El data-ride="carousel"
atributo se usa para marcar un carrusel como animado a partir de la carga de la página. Si no usa data-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:
$('.carousel').carousel()
Opciones
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-
, como en data-interval=""
.
Nombre | Escribe | Defecto | Descripción |
---|---|---|---|
intervalo | número | 5000 | La cantidad de tiempo de retraso entre el ciclo automático de un elemento. Si false , el carrusel no realizará un ciclo automáticamente. |
teclado | booleano | verdadero | Si el carrusel debe reaccionar a los eventos del teclado. |
pausa | cadena | booleano | 'flotar' | Si se establece en En dispositivos táctiles, cuando se establece en |
conducir | cuerda | falso | 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. |
envolver | booleano | verdadero | Si el carrusel debe circular continuamente o tener paradas bruscas. |
tocar | booleano | verdadero | Si el carrusel debe admitir interacciones de deslizamiento hacia la izquierda/derecha en dispositivos con pantalla táctil. |
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 .
.carousel(options)
Inicializa el carrusel con opciones opcionales object
y comienza a recorrer los elementos.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Recorre los elementos del carrusel de izquierda a derecha.
.carousel('pause')
Evita que el carrusel pase de un elemento a otro.
.carousel(number)
Cicla el carrusel a un marco en particular (basado en 0, similar a una matriz). Vuelve a la persona que llama antes de que se haya mostrado el elemento de destino (es decir, antes de slid.bs.carousel
que ocurra el evento).
.carousel('prev')
Pasa al elemento anterior. Vuelve a la persona que llama antes de que se haya mostrado el elemento anterior (es decir, antes de slid.bs.carousel
que ocurra el evento).
.carousel('next')
Pasa al elemento siguiente. Vuelve a la persona que llama antes de que se muestre el siguiente elemento (es decir, antes de slid.bs.carousel
que ocurra el evento).
.carousel('dispose')
Destruye el carrusel de un elemento.
.carousel('nextWhenVisible')
No cambies el carrusel al siguiente cuando la página no esté visible o el carrusel o su principal no estén visibles. Vuelve a la persona que llama antes de que se muestre el siguiente elemento (es decir, antes de slid.bs.carousel
que ocurra el evento).
.carousel('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 muestre el siguiente elemento (es decir, 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 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 |
---|---|
diapositiva.bs.carrusel | Este evento se activa inmediatamente cuando slide se invoca el método de instancia. |
deslizado.bs.carrusel | Este evento se activa cuando el carrusel ha completado su transición de diapositivas. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Cambiar la duración de la transición
La duración de la transición .carousel-item
se puede cambiar con la $carousel-transition
variable 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
).