How can I incorporate slide numbering into this Bootstrap 5 carousel example? I want to display the current slide number and the total number of slides in the carousel. The slide counters can be found in the carousel-pager
div, where pager-current
represents the current slide number and pager-total
represents the total number of slides.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel-pager">
<div class="pager-current">00</div>
<div class="pager-total">00</div>
</div>
</div>