Tengo 2 carruseles Bootstrap 5 (carrusel-a y carrusel-b) en una página y me gustaría que estén sincronizados/vinculados entre sí. Creo que esto se puede hacer con js, pero no estoy muy familiarizado con js. carrusel-a tiene el siguiente aspecto (carrusel-b es idéntico):
<div id="carousel-a" class="carousel slide carousel-sync" data-bs-ride="carousel" data-bs-pause="false" data-bs-interval="50000000"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carousel-a" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carousel-a" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carousel-a" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="assets/img/placeholder-1200x500.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="assets/img/placeholder-1200x500.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="assets/img/placeholder-1200x500.png" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carousel-a" 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="#carousel-a" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>Actualmente tengo esto, pero parece que no puedo seleccionar mi carrusel, y no sé por qué.
var carouselA = document.getElementById('carousel-a'); var carouselB = document.getElementById('carousel-b'); $(carouselA.on('slide.bs.carousel', function (event) { carouselB.carousel(event.to); }));Esto funcionó para mí: todo derivado de https://getbootstrap.com/docs/5.0/components/carousel/
Asegúrese de que el intervalo de bs de datos sea el mismo para ambos carruseles
// Grab your carousels const myCarouselOne = document.querySelector('#carouselOne') const myCarouselTwo = document.querySelector('#carouselTwo') // Get either the existing Bootstrap Carousel instance or create a new one const carouselOne = bootstrap.Carousel.getOrCreateInstance(myCarouselOne); const carouselTwo = bootstrap.Carousel.getOrCreateInstance(myCarouselTwo); // Grab your radio indicators, the previous and next buttons/arrows const indicatorsAll = document.querySelectorAll('.carousel-indicators'); const prevCarouselBtn = document.querySelector('.carousel-control-prev'); const nextCarouselBtn = document.querySelector('.carousel-control-next'); // Add event listeners to your indicators, previous and next buttons/arrows indicatorsAll.forEach( IndicatorBtn => IndicatorBtn.addEventListener("click", goToIndicatorCarousels)); prevCarouselBtn.addEventListener('click', prevCarousels); nextCarouselBtn.addEventListener('click', nextCarousels); // Call the Bootstrap 'to' function for both Carousels to go to the indicator page that was clicked function goToIndicatorCarousels (e){ let clickedIndicator = e.target.attributes[1].value; carouselOne.to(clickedIndicator); carouselTwo.to(clickedIndicator); } // Call the Bootstrap 'prev' function for both Carousels to go to the previous page function prevCarousels(){ carouselOne.prev(); carouselTwo.prev(); } // Call the Bootstrap 'next' function for both Carousels to go to the next page function nextCarousels(){ carouselOne.next(); carouselTwo.next(); }Esperemos que no se requiera JS. Puede controlar el tiempo de cada diapositiva individual utilizando data-bs-interval="8000" en cada diapositiva, donde 8000 es la cantidad de segundos antes de que aparezca la siguiente diapositiva.
Por ejemplo. Todas sus diapositivas se pueden configurar en 8 segundos como se indicó anteriormente o tal vez su última diapositiva es información de contacto y desea que se muestre durante 12 segundos o algo por el estilo.
Cada una de sus diapositivas se vería así.
<div class="carousel-item active data-bs-interval="8000"> <img src="assets/img/....." class="d-block w-100" alt="..."> </div>