Carousel Automatico e manual con bootstrap

Previous Next

Características del Carrusel:

1. Imagen Cambiante: El carrusel muestra una serie de imágenes que cambian automáticamente o manualmente a través de controles de navegación.

2. Bootstrap: Este construido utilizando las clases y componentes de Bootstrap, lo que facilita la creación de un carrusel receptivo y atractivo.

3. Personalización: Puedes personalizar las imágenes, su tamaño y la velocidad de cambio según tus necesidades.

Posibles Mejoras:

1. Anadir Controles de Punto: Puedes agregar controles de puntos debajo del carrusel para mostrar la posición actual a los usuarios y permitirles saltar a imágenes específicas.

2. Textos Descriptivos: Anadir textos descriptivos o títulos a cada imagen para proporcionar más contexto y detalles sobre lo que se muestra en cada diapositiva.

3. Transiciones Personalizadas: Personalizar las transiciones entre las imágenes para darle un aspecto único al carrusel.

4. Mas Contenido: Si la entrada del blog esté relacionada con las imágenes en el carrusel, puedes proporcionar información adicional o enlaces relacionados debajo del carrusel para enriquecer el contenido.

5. Optimización de Imágenes: Asegúrate de que las imágenes utilizadas estén optimizadas para la web para mantener el tiempo de carga rápido.

6. Accesibilidad: Considera la accesibilidad web al agregar etiquetas alt descriptivas para las imágenes y asegurarte de que el carrusel sea completamente accesible para usuarios con discapacidades.

...

              
              <div class="container my-5 text-center">
            <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://cdn.pixabay.com/photo/2023/09/20/04/04/sea-urchin-8263832_960_720.jpg" alt="Imagen 1" style="width: 650px; height: 350px; margin: 0 auto;">
                    </div>
                    <div class="carousel-item">
                        <img src="https://cdn.pixabay.com/photo/2023/10/20/13/48/tamarin-8329530_960_720.png" alt="Imagen 2" style="width: 650px; height: 350px; margin: 0 auto;">
                    </div>
                    <div class="carousel-item">
                        <img src="https://cdn.pixabay.com/photo/2023/09/14/15/48/woman-8253239_960_720.jpg" alt="Imagen 3" style="width: 650px; height: 350px; margin: 0 auto;">
                    </div>
                    <div class="carousel-item">
                        <img src="https://cdn.pixabay.com/photo/2023/10/18/08/17/rose-8323259_960_720.jpg" alt="Imagen 4" style="width: 650px; height: 350px; margin: 0 auto;">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </a>
                <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </a>
            </div>
        </div>
        
      

                
                <div id="carouselExample" class="carousel slide mx-auto mb-5" style="width: 650px;">
                <div class="carousel-inner" >
                  <div class="carousel-item active" >
                    <img src="https://cdn.pixabay.com/photo/2023/06/29/16/10/zebra-8096659_960_720.png" class="d-block w-100" alt="..." style="height:450px">
                  </div>
                  <div class="carousel-item">
                    <img src="https://cdn.pixabay.com/photo/2023/10/16/14/59/red-leaf-8319391_960_720.jpg" class="d-block w-100" alt="..." style="height:450px">
                  </div>
                  <div class="carousel-item">
                    <img src="https://cdn.pixabay.com/photo/2023/10/27/17/04/dahlia-8345799_960_720.jpg" class="d-block w-100" alt="..." style="height:450px">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
          
        

Ir al indice

---