Hey guys,
I'm having some trouble with my Bootstrap 5 carousel. I want to add a progress bar with left and right arrows, and also the number of slides displayed, just like in this image: https://i.sstatic.net/pqOMy.jpg
I did some research and found a couple of solutions, but they were all based on Bootstrap 3 and didn't work for Bootstrap 5. Finally, I stumbled upon a similar thread that had a JavaScript code, but it required manual clicking and didn't work automatically. So, I'm looking for a similar solution where the numbers have an active class that switches from 1-2 to 2-3, and so on, while also updating the progress bar according to the slides. Here's the thread for reference: Link
Any help would be greatly appreciated.
Here's what I have currently:
const myCarousel = document.getElementById("carouselExampleIndicators2");
const carouselIndicators = myCarousel.querySelectorAll(
".carousel-indicators button span"
);
let intervalID;
const carousel = new bootstrap.Carousel(myCarousel);
window.addEventListener("load", function () {
fillCarouselIndicator(1);
});
myCarousel.addEventListener("slide.bs.carousel", function (e) {
let index = e.to;
fillCarouselIndicator(++index);
});
function fillCarouselIndicator(index) {
let i = 0;
for (const carouselIndicator of carouselIndicators) {
carouselIndicator.style.width = 0;
}
clearInterval(intervalID);
carousel.pause();
intervalID = setInterval(function () {
i++;
myCarousel.querySelector(".carousel-indicators .active span").style.width =
i + "%";
if (i >= 100) {
// i = 0; -> just in case
carousel.next();
}
}, 50);
}#carouselExampleIndicators2 .carousel-item p{
font-family:'Giove',sans-serif;
text-transform: uppercase;
margin: 16px 200px;
font-size: 22px;
color: #e9c8b9;
}
#carouselExampleIndicators2 .carousel-item p::before {
content: url(../images/vec.png);
position: absolute;
top: 0%;
left: 21.5%;
opacity: 14%;
}
#carouselExampleIndicators2 .carousel-indicators [data-bs-target] {
position: relative;
width: 60px;
height: 6px;
border: none;
border-radius: 24px;
}
#carouselExampleIndicators2 .carousel-indicators [data-bs-target] span {
content: "";
position: absolute;
top: 0%;
left: 0;
width: 0;
height: 100%;
background: #bb440d;
border-radius: inherit;
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760318061804">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e3f8e6f8e4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid text-center section0 px-0 bg-dark">
<div id="carouselExampleIndicators2" class="carousel slide" data-bs-ride="carousel" data-bs-pause="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
<span></span>
</button>
<button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="1" aria-label="Slide 2">
<span></span>
</button>
<button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="2" aria-label="Slide 3">
<span></span>
</button>
</div>
<div class="carousel-inner pb-5">
<div class="carousel-item active">
<p>The most exclusive listings in Europe and the Middle East, <br>
carefully handpicked to deliver state-of-the-art <br>
customer experience.</p>
<!-- <div class="number">1</div> -->
</div>
<div class="carousel-item">
<p>The most exclusive listings in Europe and the Middle East, <br>
carefully handpicked to deliver state-of-the-art <br>
customer experience.</p>
</div>
<div class="carousel-item">
<p>The most exclusive listings in Europe and the Middle East, <br>
carefully handpicked to deliver state-of-the-art <br>
customer experience.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators2" 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="#carouselExampleIndicators2" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>