I recently copied the bootstrap 5 Carousel code and tweaked it with some additions, however, it's not functioning correctly. It seems to only go to the 2nd slide and then stops. Strangely enough, when I open the developer tools (F12) and go to inspect element, it starts working again. Sometimes it doesn't even advance to the 2nd slide at all.
Here is the HTML code snippet:
<!-- Image Carousel -->
<div id=".Carousel" class="carousel pt-5 slide bg-dark" data-bs-touch="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="5000">
<div class="ratio ratio-21x9"><img src="../FrontEnd/Images/Home/MainPicture.jpeg" class="ratio pt-3 ratio-16x9 d-block w-100"alt="Main Picture">
</div>
</div>
<div class="carousel-item" data-bs-interval="5000">
<div class="ratio ratio-21x9"><img src="../FrontEnd/Images/Home/BiliardBar.jpeg"class="ratio pt-3 ratio-16x9 d-block w-100" alt="Billiard And Bar">
</div>
</div>
<div class="carousel-item" data-bs-interval="5000">
<div class="ratio ratio-21x9"><img src="../FrontEnd/Images/Home/Darts.jpeg"class="ratio pt-3 ratio-16x9 d-block w-100" alt="Darts">
</div>
</div>
</div>
</div>
<!-- End of Image Carousel -->
Additionally, I want to note that my CSS file doesn't contain anything that could potentially interfere with the carousel's functionality. I do have a navbar positioned above my carousel with a z-index: 2; (while the carousel has a z-index of 1), but even after removing it, the carousel still had issues.
Despite trying multiple solutions from online searches, nothing seems to fix the problem. I came across a piece of code that supposedly eliminates the flashing animation when switching carousel items:
<script>$(window).load(function () { $('.Carousel').carousel() })</script>
I placed this script at the top of my page, but since I'm not familiar with JavaScript, I'm unsure if I implemented it correctly. Any insights or suggestions would be greatly appreciated.