➜ Carrusel de Imágenes

Para crear un carrusel debemos usar el componente Carousel de Bootstrap, antes debemos establecer imágenes rectangulares

<!-- carrusel-->
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="img/slide_1.png" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/slide_1.png" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/slide_1.png" class="d-block w-100" alt="...">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    <!-- carrusel/-->

Descripción del código:

Este código implementa un carrusel de imágenes utilizando Bootstrap 4.5. Aquí se explica cómo funciona cada parte:

1. Contenedor del carrusel (<div id="carouselExampleControls">):

   • Este <div> con las clases carousel slide y data-ride="carousel" es el contenedor principal del carrusel, que permite a las imágenes deslizarse automáticamente.

2. Imágenes del carrusel (<div class="carousel-inner">):

   • Dentro de este contenedor, las imágenes del carrusel están organizadas en varios <div class="carousel-item">, cada uno representando un slide del carrusel.
   • La primera imagen tiene la clase active, lo que indica que es la imagen que se muestra inicialmente cuando el carrusel carga.
   • Todas las imágenes están configuradas con las clases d-block w-100 para asegurar que se muestren como un bloque y ocupen el 100% del ancho del contenedor.

3. Controles del carrusel (<a class="carousel-control-prev"> y <a class="carousel-control-next">):

   • Los enlaces con las clases carousel-control-prev y carousel-control-next permiten a los usuarios navegar entre las imágenes del carrusel manualmente.
   • Dentro de cada enlace, los iconos de navegación se generan usando carousel-control-prev-icon y carousel-control-next-icon. Estos iconos son ocultos para los lectores de pantalla mediante un span con la clase sr-only.

Este carrusel es completamente responsive y puede manejar cualquier cantidad de imágenes, permitiendo que los usuarios naveguen entre ellas de manera automática o manual.