Javascript slider add counter slide number

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.

The HTML:

<section id="gallery">
    <div class="gallery-container">
        <figure class="gallery-item">
            <img src="img-1.jpg" />
        </figure>
        <figure class="gallery-item">
            <img src="img-2.jpg" />
        </figure>
        <figure class="gallery-item">
            <img src="img-3.jpg" />
        </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>

The JS:

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);
});

Thank you.