Inicio » Cursos » Diseño Web Responsive con Bootstrap

Curso Diseño Web Responsive con Bootstrap

Capitulo 3 ➜ Carrusel de Imágenes

Cómo Crear un Carrusel de Imágenes Responsive con Bootstrap 4.5

Descubre cómo implementar un carrusel de imágenes responsive usando Bootstrap 4.5. Aprende a agregar múltiples imágenes, configurar la navegación automática, y optimizar la experiencia visual en cualquier dispositivo.

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.

 


1553 visitas

« Capítulo 2 – Menú de navegación

Capítulo 4 – Productos en la portada »

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2024