Carrusel Bootstrap 5

Carrusel / Diapositivas

El carrusel (diapositivas) es un contenedor para recorrer elementos en un ciclo:

Cómo crear un carrusel

El siguiente ejemplo muestra cómo crear un carrusel básico con indicadores y controles:

Ejemplo

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicadores/puntos -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <!-- Diapositivas/Carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
  </div>
  <!-- Controles/íconos laterales -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Prueba personalmente

Ejemplo de explicación

Descripción de la función de cada clase en el ejemplo anterior:

Clase Descripción
.carousel Crear una rotación.
.carousel-indicators Agregar indicadores a la rotación. Son los puntos pequeños en la parte inferior de cada diapositiva.
Representa cuántas diapositivas hay en la rotación y qué diapositiva está viendo el usuario actualmente.
.carousel-inner Agregar diapositivas a la rotación.
.carousel-item Definir el contenido de cada diapositiva.
.carousel-control-prev Agregar un botón de desplazamiento a la izquierda (anterior) a la rotación, permitiendo al usuario retroceder entre diapositivas.
.carousel-control-next Agregar un botón de desplazamiento a la derecha (siguiente) a la rotación, permitiendo al usuario avanzar entre diapositivas.
.carousel-control-prev-icon Usar junto con .carousel-control-prev para crear un botón de "anterior".
.carousel-control-next-icon Usar junto con .carousel-control-next para crear un botón de "siguiente".
.slide Agregar efectos de transición y animación CSS al deslizar de un proyecto al siguiente.
Si no desea este efecto, elimine este tipo.

Agregar un título a la diapositiva

Por favor, agregue un título para cada <div class="carousel-item"> de <div class="carousel-caption"> Agregar elementos dentro de, crear un título para cada diapositiva:

Ejemplo

<div class="carousel-item">
  <img src="beijing.jpg" alt="Beijing">
  <div class="carousel-caption">
    <h3>Beijing</h3>
    <p>¡Gracias, Beijing!</p>
  </div>
</div>

Prueba personalmente