I have 2 Bootstrap 5 carousels (carousel-a & carousel-b) on one page and i wloud like them to be synced/linked to eachother. I think this can be done with js but i'm not too familiar with js. carousel-a looks like follows (carousel-b is identical):
<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>
Currently i have this but i cant seem to select my carousel, and i dont know why.
var carouselA = document.getElementById('carousel-a');
var carouselB = document.getElementById('carousel-b');
$(carouselA.on('slide.bs.carousel', function (event) {
carouselB.carousel(event.to);
}));
This worked for me - All derived from https://getbootstrap.com/docs/5.0/components/carousel/
Ensure the data-bs-interval are the same for both carousels
// 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();
}
Hopefully no JS is required. You can control each individual slide timing using data-bs-interval="8000" on each slide where 8000 is the number of seconds before the next slide comes into view.
For example. All of your slides could be set to 8 seconds as above or maybe your last slide is contact info and you want that to display for 12 seconds or something along those lines.
Each of your slides would look like this.
<div class="carousel-item active data-bs-interval="8000">
<img src="assets/img/....." class="d-block w-100" alt="...">
</div>