CODEWITHSUNDEEP
javascriptbootstrap-5
Cavefish
Cavefish

Reputation: 53

Add Current and Total Slide Counters to Bootstrap 5 Carousel

Is there a way to add a number for the current slide and total slides to the following carousel example using Bootstrap 5? The counters are represented in the carousel-pager div below, with pager-current being the current slide number, and pager-total being 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>

Upvotes: 1

Views: 798

Answers (1)

Yasser CHENIK
Yasser CHENIK

Reputation: 407

sett up :

var imgs = [].slice.call(document.getElementsByClassName('container')[0].getElementsByTagName('*'),0);

document.getElementsByClassName('total')[0].innerHTML = imgs.length ;

//create a global variable 
var currentImg = 1;

and add this to anything that changes the current img like a button or a timer ...:

document.getElementsByClassName('pager-current')[0].innerHTML = (++currentImg) % imgs.length ;

Upvotes: 2

Related Questions