Crear un Carousel de Imagenes con Bs 5 en 1 min

El carousel de imagenes sirve para mostrar una lista de imagenes que van pasando, vamos a crear un carousel de imagenes con Bootstrap 5.

El carousel de imagenes ya viene integrado como parte de los componentes de Bootstrap desde las primeras versiones,por lo tanto en bootstrap 5 los carouseles se hacen casi de la misma manera.

Un carousel de imagenes no puede faltar en tu pagina web ya que es una forma de conectar con tus visitantes y ofrecerles informacion importante.

Crear un Carousel

Para crear un carousel de imagenes vamos a necesitar.

• Una lista de imagenes que todas tengan la misma medida por ejemplo: 1920×1080
• Bootstrap 5

El carousel tiene 3 componenes basicos.

1. Puntos indicadores, por cada imagen o elemento del carousel se debe crear un punto o indicador, se usa la clase carousel-indicators, cada punto nos lleva a una imagen y los puntos tienen un indice que empieza en cero para identificar cada imagen.
2. Las imagenes o puede ser solo texto, esto van dentro del contenedor carousel-inner y cada elemento del carousel de identifica con la clase carousel-item
3. Botones de avance, en los lados izquierdo y derecho del carousel se agregan 2 botones, uno para retroceder y otro para avanzar las imagenes.

Codigo

A continuacion el codigo completo para un carousel de 3 elementos, al final te dejo un enlace de descarga con todo el ejemplo completo.

        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                        aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                        aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="wawsys1.png" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Primer Slide</h5>
                    <p>Este es el primer slide de prueba.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="wawsys2.png" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Segundo Slide</h5>
                    <p>Este es el segundo slide de prueba.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="wawsys3.png" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Tercer Slide</h5>
                    <p>Este es el tercer slide de prueba.</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

Y el resultado seria el siguiente.

Descargar

A continuacion puedes descargar el ejemplo completo: codigo y assets.

Link: https://drive.google.com/file/d/1R_CQCCEbp9eTzbTyGoejXa6F3GxxSny3/view

Una vez descargado el ejemplo, editas el archivo index.html y agregas las imagenes que quieras.

Administra tu E-commerce Profesional

¡Lleva tu Tienda en linea E-commerce al siguiente nivel! Consigue el control total desde el carrito de compra hasta el envío final con Katana Pro.

Ver Katana Pro: Sistema E-commerce Pro→