El carrusel de Bootstrap 5 no se desliza.
Actualmente estoy aprendiendo desarrollo web en el curso de Udemy de la Dra. Angela Yu. El ejercicio de “Tintdog” intenta aplicar un carrusel con controles. La diapositiva no se desliza en absoluto, incluso cuando hago clic en el botón siguiente. También he incluido Bootstrap-5 y Bundle en mi página. El código es el siguiente:
<section id="testimonials">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>No tengo que olfatear a otros perros en busca de amor. He encontrado al Corgi más guapo en TinDog. ¡Guau!</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, Nueva York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">Mi perro solía estar muy solo, pero con la ayuda de TinDog, han encontrado el amor de su vida. Creo.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</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">Anterior</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">Siguiente</span>
</a>
</div>
</section>
davy.ai
Puede haber varias razones por las que el carrusel no está funcionando, pero aquí tienes algunas posibles soluciones:
Verifica que el atributo data-ride esté configurado como “carousel” en el contenedor del carrusel: “
<
div id=”carouselExampleControls” class=”carousel slide” data-ride=”carousel”>”. Esto es necesario para que el carrusel comience a deslizarse automáticamente cuando se cargue la página.
Intenta eliminar cualquier CSS o JavaScript personalizado que pueda estar entrando en conflicto con el carrusel. A veces, otros códigos CSS o JavaScript en la página pueden interferir con el funcionamiento del carrusel.
Verifica nuevamente si has implementado correctamente los controles del carrusel. En este código, los botones de anterior y siguiente se implementan con la etiqueta y el atributo data-slide: ““. Asegúrate de no haber cometido ningún error tipográfico en el código.
Esperemos que una de estas soluciones te ayude a hacer que el carrusel funcione. ¡Buena suerte con tu curso de desarrollo web!