I am trying to implement dual sliding carousels using Bootstrap 5, but I am encountering issues with getting them to slide simultaneously. Despite incorporating
data-bs-target=".carousel"
, the synchronization isn't working as intended in my code snippet below:
<div class="section-04">
<div class="container-fluid">
<div class="row col-reverse">
<div class="col-md-6 p-left">
<div class="left-block">
<div class="row b-top">
<div class="col-md-6">
<h3>
The <br>
Most <br>
Wanted
</h3>
</div>
<div class="col-md-6">
<p>
Current favorites, new icons and the best sellers from this month.
</p>
<a href="#" class="btn btn-main move-btn">Explore More</a>
</div>
</div>
<div id=& quot; carouselExampleControls2& quot; class=& quot; carousel slide carousel-sync& quot; data - bs - interval = & quot; false& quot; data - bs - ride = & quot; carousel& quot; & gt ;
& lt;
div class =& quot; carousel-inner & quot; >
& lt;
div class =& quot; carousel-item active & quot; >
& lt;
div class =& quot; carousel-card & quot; >
& lt;
div class =& quot; row & quot; >
& lt;
div class =& quot; col-md-12 & quot; >
& lt;
h3 class =& quot; section-text & quot; > Petite Collection
& lt; /h3 >
& lt;
hr class =& quot; mb-3 & quot; >
& lt;
/div >
& lt;
div class =& quot; col-md-6 & quot; >
& lt;
h2 & gt; Spoiled & lt; br & gt; Lashes & lt; /h2 >
& lt;
/div >
& lt;
div class =& quot; col-md-6 & quot; >
& lt;
p class =& quot; card-price & quot; > $16.00 & lt; span & gt; USD & lt; /span >
...