I’m trying to implement multiple Bootstrap carousels on my website, one for desktop and another for mobile, but I’m encountering issues with getting them to work properly. Here’s my HTML code:
<div class="d-none d-lg-block" id="carouselExampleIndicators-desktop" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/home.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/home1.png" alt="Second slide">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators-desktop" 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="#carouselExampleIndicators-desktop" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="d-block d-lg-none" id="carouselExampleIndicators-mobile" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/mobile1.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/mobile1.png" alt="Second slide">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators-mobile" 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="#carouselExampleIndicators-mobile" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
However, despite following the Bootstrap documentation, the carousels are not functioning as expected. The indicators and controls are not working, and the slides are not transitioning.
Additional Information:
–
-
I have verified that the IDs and classes are correctly assigned.
-
I have checked the browser console for any errors, but there are no apparent issues reported.
What I Tried: I attempted to implement two Bootstrap carousels on my website, one for desktop and another for mobile.
Expectation: I expected both carousels to function properly, with working indicators and controls, allowing users to navigate through the slides seamlessly. The desktop carousel should only be visible on screens larger than lg (large), while the mobile carousel should be visible on screens smaller than lg.
Result: Unfortunately, neither of the carousels are working as expected. The indicators and controls are unresponsive, and the slides do not transition as intended. I have ensured that I included the necessary Bootstrap JavaScript and CSS files, verified the correct assignment of IDs and classes, and checked the browser console for errors, but I haven’t been able to identify the root cause of the issue.