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:

  • true: se puede navegar por el carrusel con el teclado haciendo clic en la derecha e izquierda
  • false: no se puede navegar por el carrusel con el 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

  • true: se mueve ciclicamente
  • false: se para 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