How to sync/link 2 bootstrap 5 carousels

Question

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):

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);
}));

user_17153465 · Answer

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.

user_19004120 · Answer

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();
  }

How to sync/link 2 bootstrap 5 carousels

2 Answers