Bootstrap 5 carousel indicator for multiple carousels

user_2912339 0
Viewed 1701

I'm trying to trigger multiple carousel sliders via data-bs-target. I tried with class name instead of ID, but it triggers only one.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="row">
<div class="col-6">
<div id="carouselA" class="carousel slide carouselBoth" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target=".carouselBoth" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target=".carouselBoth" data-bs-slide-to="1"></li>
    <li data-bs-target=".carouselBoth" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/300x150/1" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/300x150/2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/300x150/3" class="d-block w-100" alt="...">
    </div>
  </div>
</div>
</div>

<div class="col-6">

<div id="carouselB" class="carousel slide carouselBoth" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/300x150/1" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/300x150/2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/300x150/3" class="d-block w-100" alt="...">
    </div>
  </div>
</div>
</div>
</div>

I was guessing data-bs-target=".carouselBoth" would work but looks like I was wrong or I missed something

JSFIDDLE

bootstrap-5 css javascript
1 Answers

According to the Bootstrap 5 beta docs...

"Control and indicator elements must have a data-bs-target attribute (or href for links) that matches the id of the .carousel element."

So I think only the Collapse component supports multiple targets. However, you can hook into the slide.bs.carousel event of the 1st carousel to trigger slide on the 2nd carousel using javascript...

var carouselA = document.getElementById('carouselA')
var carouselB = document.getElementById('carouselB')

carouselA.addEventListener('slide.bs.carousel', function(e) {
    var bsCarouselB = bootstrap.Carousel.getInstance(carouselB)
    bsCarouselB.to(e.to)
})

Demo

user_1714560
Related