I recently encountered an issue with adding two Bootstrap 5 carousels on the same page. Even after assigning unique IDs to each carousel, the second carousel seems to mix photos with the first one, duplicating two photos from the previous slide. I tried different solutions, including referencing this post How to place two bootstrap carousels in the same page?, but nothing seems to resolve the problem.
Is there a known solution to this issue?
Here's the code snippet for the carousels:
<!-- Bootstrap carousel 1 -->
<div class="container text-center my-3 mb-5">
<div class="row mx-auto my-auto justify-content-between">
<div id="Carousel-1" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
...
</div>
...
</div>
...
</div>
</div>
</div>
<!-- Bootstrap carousel 2 -->
<div class="container text-center my-3 mb-5 carousel2">
<div class="row mx-auto my-auto justify-content-between">
<div id="Carousel-2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
...
</div>
...
</div>
...
</div>
</div>
</div>
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})