Javascript slider add counter slide number

Question

I have a slider built in Javascript, CSS, and HTML with no dependencies. The slider works fine.

How could I display the counter slide number in Javascript inside the div element .gallery-counter?

For example, if there is a total of 8 slides, the first slide would display 1/8.

let currentIndex = 0;

document.querySelector('.prev-button').addEventListener('click', () => {
    navigate(-1);
});

document.querySelector('.next-button').addEventListener('click', () => {
    navigate(1);
});

// Navigation
function navigate(direction) {
    const galleryContainer = document.querySelector('.gallery-container');
    const totalImages = document.querySelectorAll('.gallery-item').length;

    currentIndex = (currentIndex + direction + totalImages) % totalImages;
    const offset = -currentIndex * 100;

    galleryContainer.style.transform = `translateX(${offset}%)`;
}

// Autoplay
let autoplayInterval = null;

function startAutoplay(interval) {
    stopAutoplay();
    autoplayInterval = setInterval(() => {
        navigate(1);
    }, interval);
}

function stopAutoplay() {
    clearInterval(autoplayInterval);
}

startAutoplay(3000);

// Stop autoplay when user interacts
document.querySelectorAll('.nav-button').forEach(button => {
    button.addEventListener('click', stopAutoplay);
});

<section id="gallery">
    <div class="gallery-container">
        <figure class="gallery-item">
            <img src="https://picsum.photos/seed/picsum/200/300" />
        </figure>
        <figure class="gallery-item">
            <img src="https://picsum.photos/200/300/?blur" />
        </figure>
        <figure class="gallery-item">
            <img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" />
        </figure>
    </div>
    <div class="gallery-counter"></div>
    <nav class="gallery-navigation">
        <button class="nav-button prev-button"><span>&#60;</span></button>
        <button class="nav-button next-button"><span>&#62;</span></button>
    </nav>
</section>

Answer 1

I would introduce a new function displaySlideNumber() to handle this task. The function takes 2 parameters: the index of the slide we are currently on and the total number of images. It then targets Your gallery-counter div and sets its inner text content to our desired value.

Note that I am incrementing your index value by 1, since we don't want to display the 1st slide as 0 but as 1, etc.

function displaySlideNumber(currentIndex, totalImages) {

   const counter = document.querySelector(".gallery-counter");
   const slideNumber = (currentIndex + 1).toString() + "/" + totalImages.toString(); 
   counter.innerHTML = slideNumber;

 }

The function would be called from inside the navigate function like this:

function navigate(direction) {

   const galleryContainer = document.querySelector('.gallery-container');
   const totalImages = document.querySelectorAll('.gallery-item').length;

   currentIndex = (currentIndex + direction + totalImages) % totalImages;
   const offset = -currentIndex * 100;

   galleryContainer.style.transform = `translateX(${offset}%)`;

   displaySlideNumber(currentIndex, totalImages);

}

Please note that for the counter to appear you have to call the navigate function at least once. You could call the function on page load to navigate to your 1st slide.

Additionaly, please consider adding a <p> element inside gallery-counter, as writing directly to div innerHTML is not the best practice. Then inside displaySlideNumber(), in the querySelector, simply switch the class name of your div with the class name / id of the new p element.