Sunday, 4 December 2022

Does bootstrap allow multiple carousels to be synced via multiple ids in data-target attribute?

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/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

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


<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls, #carouselExampleControls2" 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="#carouselExampleControls, #carouselExampleControls2" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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.



from Does bootstrap allow multiple carousels to be synced via multiple ids in data-target attribute?

No comments:

Post a Comment