Please consider the following attempt to sync two bootstrap carousels:

.carousel {
  background: gray;
  
}
.carousel:nth-child(2) {
  background: lightgray;
}

body button {
  background: lightblue !important;
  z-index: 2;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="carouselExampleControls" data-bs-ride="false"  data-bs-ride="carousel">
  <div  data-bs-interval="false">
    <div >
      111
    </div>
    <div  data-bs-interval="false">
      222
    </div>
    <div  data-bs-interval="false">
      333
    </div>
  </div>  
</div>
<div id="carouselExampleControls2" data-bs-ride="false"  data-bs-ride="carousel">
  <div  data-bs-interval="false">
    <div >
      111
    </div>
    <div  data-bs-interval="false">
      222
    </div>
    <div  data-bs-interval="false">
      333
    </div>
  </div>  
</div>


<button  type="button" data-bs-target="#carouselExampleControls, #carouselExampleControls2" data-bs-slide="prev">
    <span  aria-hidden="true"></span>
    <span >Previous</span>
  </button>
  <button  type="button" data-bs-target="#carouselExampleControls, #carouselExampleControls2" data-bs-slide="next">
    <span  aria-hidden="true"></span>
    <span >Next</span>
  </button>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>

As you can see only one carsousel is working, but other SO posts suggest that we can use multiple isd in data-target attribute.

CodePudding user response：

yes bootstrap allow multiple carousels to be synced via multiple ids in data-target attribute, you get examples from codepen also. you can follow this link: https://getbootstrap.com/docs/4.2/components/carousel/

CodePudding user response：

TL;DR Seems like still no.

This question has been asked before. The answer from Zim suggested this was NOT possible back then (Bootstrap v5.0).

If you take a look at Bootstrap v5.2 docs, it still says exactly the same:

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

However...

Collapse (not Carousel) component supports multiple targets, but that is of no help to you since you are interested in Carousel component.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<p>
  <button  type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div >
  <div >
    <div  id="multiCollapseExample1">
      <div >
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div >
    <div  id="multiCollapseExample2">
      <div >
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>

Is there any solution?

Zim's solution using JavaScript (although not as elegant as the one you are asking about).

var carouselA = document.getElementById('carouselExampleControls');
var carouselB = document.getElementById('carouselExampleControls2');

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

.carousel {
  background: gray;
}

.carousel:nth-child(2) {
  background: lightgray;
}

body button {
  background: lightblue !important;
  z-index: 2;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="carouselExampleControls"  data-bs-ride="carousel">
  <div  data-bs-interval="false">
    <div >
      111
    </div>
    <div  data-bs-interval="false">
      222
    </div>
    <div  data-bs-interval="false">
      333
    </div>
  </div>
</div>
<div id="carouselExampleControls2" lass="carousel slide" data-bs-ride="carousel">
  <div  data-bs-interval="false">
    <div >
      111
    </div>
    <div  data-bs-interval="false">
      222
    </div>
    <div  data-bs-interval="false">
      333
    </div>
  </div>
</div>


<button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
  <span  aria-hidden="true"></span>
  <span >Previous</span>
</button>
<button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
  <span  aria-hidden="true"></span>
  <span >Next</span>
</button>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>