Boostrap 4 – Carrusel
Estas son las clases para Carrusel que podemos utilizar con Boostrap 4.
Clase | Descripción |
---|---|
.carousel | Crea un carrusel |
.carousel-indicators | Agrega indicadores para el carrusel. Estos son los pequeños puntos en la parte inferior de cada diapositiva (que indica cuántas diapositivas hay en el carrusel y qué diapositiva está viendo el usuario actualmente) |
.carousel-inner | Agrega diapositivas al carrusel |
.carousel-item | Especifica el contenido de cada diapositiva |
.carousel-control-prev | Agrega un botón izquierdo (anterior) al carrusel, que permite al usuario regresar entre las diapositivas |
.carousel-control-next | Agrega un botón derecho (siguiente) al carrusel, que permite al usuario avanzar entre las diapositivas |
.carousel-control-prev-icon | Se usa junto con .carousel-control-prev para crear un botón “anterior” |
.carousel-control-next-icon | Se usa junto con .carousel-control-next para crear un botón “siguiente” |
.carousel-caption | Especifica un título para el carrusel. |
.slide | Agrega una transición CSS y un efecto de animación cuando se desliza de un elemento al siguiente. Elimina esta clase si no quieres este efecto |
Ejm
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <style> /* Make the image fully responsive */ .carousel-inner img { width: 100%; height: 100%; } </style> </head> <body> <div class="container mt-3"> <h2>Carousel</h2> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="la.jpg" alt="Los Angeles" width="1100" height="500"> </div> <div class="carousel-item"> <img src="chicago.jpg" alt="Chicago" width="1100" height="500"> </div> <div class="carousel-item"> <img src="ny.jpg" alt="New York" width="1100" height="500"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#myCarousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#myCarousel" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </body> </html>
Vía data-*, atributos
El atributo data-ride = “carousel” activa el carrusel.
Los atributos data-slide y data-slide-to especifican a qué diapositiva ir.
El atributo data-slide acepta dos valores: anterior o siguiente, mientras que data-slide-to acepta números.
Ejm
<!-- Carousel --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Carousel Indicators --> <li data-target="#myCarousel" data-slide-to="1"></li> <!-- Carousel Controls --> <a class="carousel-control-prev" href="#myCarousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a>
Vía Javascript
Habilitar manualmente con:
Ejm
// Activate Carousel $("#myCarousel").carousel(); // Enable Carousel Indicators $(".item").click(function(){ $("#myCarousel").carousel(1); }); // Enable Carousel Controls $(".carousel-control-prev").click(function(){ $("#myCarousel").carousel("prev"); });
Opciones par el carrusel
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 | Tipo | Por defecto | Descripción |
---|---|---|---|
interval | Número, o falso booleano | 5000 | Especifica el delay (en milisegundos) entre cada diapositiva.
Nota: establezca el intervalo en falso para evitar que los elementos se deslicen automáticamente |
keyboard | boolean | true | Especifica si el carrusel debe reaccionar a eventos del teclado:
|
pause | string o booleano falso | “hover” | Pausa que el carrusel pase por la siguiente diapositiva cuando el puntero del mouse ingresa al carrusel y reanuda el deslizamiento cuando el puntero del mouse sale del carrusel
Nota: establece pausa como false para detener la capacidad de pausa al pasar el mouse |
wrap | booleano | true | Especifica si el carrusel debe pasar por todas las diapositivas continuamente o detenerse en la última diapositiva
|
Métodos para el carrusel
La siguiente tabla lista todos los métodos disponibles para el carrusel.
Método | Descripción |
---|---|
.carousel(options) | Activa el carrusel con una opción. Ver opciones anteriores para valores válidos |
.carousel(“cycle”) | Pasa por los elementos del carrusel de izquierda a derecha |
.carousel(“pause”) | Evita que el carrusel pase por los elementos. |
.carousel(number) | Va a un elemento específico (basado en cero: el primer elemento es 0, el segundo elemento es 1, etc.) |
.carousel(“prev”) | Va al elemento anterior |
.carousel(“next”) | Va al elemento siguiente |
.carousel(“dispose”) | Destruye el carrusel |
Eventos de carrusel
La siguiente lista muestra los eventos disponibles para un carrusel.
Evento | Descripción |
---|---|
slide.bs.carousel | Se produce cuando el carrusel está a punto de deslizarse de un elemento a otro. |
slid.bs.carousel | Se produce cuando el carrusel ha terminado de deslizarse de un elemento a otro. |
Los eventos slid y slide tienen propiedades adicionales.
Propiedad | Descripción |
---|---|
direction | Devuelve la dirección en que se desliza el carrusel (izquierda o derecha) |
relatedTarget | Devuelve el elemento DOM que se desliza en su lugar como elemento activo |
from | Devuelve el índice del origen del elemento anterior, al pasar al siguiente. |
to | Devuelve el índice del elemento siguiente |