Pause autoplay when carousel is not within the viewport

My current Siema setup changes the slides automatically every 2 seconds, but stops when the user interacts with the carousel (either by sliding or by pressing the slide controls). It’s been working great. A live demo can be seen on my website.

Though, I’d like the autoplay only when the carousel is visible.

This is my current code:

// SIEMA

const mySiema = new Siema({
    duration: 250,
    loop: true,
    easing: "cubic-bezier(.42,0,.58,1)",
    onInit: printSlideIndexWithIndicator,
    onChange: printSlideIndexWithIndicator,
});

// INDICATORS

function printSlideIndexWithIndicator() {
    let currentSlide = this.currentSlide;
    let currentSelector = document.querySelector('.siema-current');
    let totalSelector = document.querySelector('.siema-total');
    /*let zoomSelector = document.querySelector('.siema-zoom');*/
    if (currentSlide < 0) {
        currentSelector.innerHTML = this.innerElements.length + currentSlide + 1;
    } else {
        currentSelector.innerHTML = this.currentSlide + 1;
    }
    totalSelector.innerHTML = this.innerElements.length;
}

// AUTOPLAY

const myInterval = setInterval(() => mySiema.next(), 2000);

document.querySelector(".siema-prev").addEventListener("click", () => {
    mySiema.prev();
    clearInterval(myInterval);
});
document.querySelector(".siema-next").addEventListener("click", () => {
    mySiema.next();
    clearInterval(myInterval);
});
document.querySelector(".siema").addEventListener("mousedown", () => {
    clearInterval(myInterval);
});
document.querySelector(".siema").addEventListener("touchstart", () => {
    clearInterval(myInterval);
});

I’m thinking this could be done by letting the interval run just when the div.siema is within the viewport; though, I know nothing about JavaScript and would be grateful if someone helped me out with this.

pawelgrzybek / siema

Pause autoplay when carousel is not within the viewport #273