0

tengo un problema en mi proyecto, estoy tratando de implementar un Carousel mediante Bootstrap 5, he intentado de todas las formas que nos brinda en la documentación pero simplemente no cambia las imágenes (Adjunto el código que recién estoy intentando nuevamente porque como ya mencione he intentado de diferentes maneras pero simplemente no cambia las imágenes), ayuda porfa!!

        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="img/11.jpeg" class="d-block w-60" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Some representative placeholder content for the first slide.</p>
                </div>
                </div>
                <div class="carousel-item">
                    <img src="img/11.jpeg" class="d-block w-60" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Some representative placeholder content for the second slide.</p>
                </div>
                </div>
                <div class="carousel-item">
                    <img src="img/11.jpeg" class="d-block w-60" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Some representative placeholder content for the third slide.</p>
                </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
            </div>
2
  • 2
    Si te refieres a que siempre es la misma imagen, ya te han contestado que efectivamente estas usando siempre la misma. Si te refieres a que no hace el efecto de slide, quizás sea porque no has puesto bien la clase y el script de bootstrap 5 como indican en este enlace. En mis pruebas, cambiando solo la imagen (porque no tengo la tuya), me funciona bien. Puedes revisarlo aquí y ver que te falta a tí: jsfiddle.net/1ce5gom8
    – masterguru
    Commented el 2 feb. 2022 a las 6:01
  • Tenias razón amigo, me ha faltado los scripts de "Separate" de la documentación y ahora si ya me funciona, gracias! Commented el 2 feb. 2022 a las 23:11

1 respuesta 1

0

No será porque en la imagen colocada en el img src de cada carousel item es la misma?

Todas son img src="img/11.jpeg"

1
  • si tengo tengo en cuenta que estoy poniendo la misma en imagen encada carusel, lo puse asi rapido para ver si funcionaba, pero tengo el problema que ya habia mencionado.. Commented el 2 feb. 2022 a las 22:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.