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

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

Answer 1

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>

Answer 2

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