How do I reset/stop Siema autoplay interval on interaction?

Question

I’m trying the pure JavaScript carousel plugin Siema.

I set the carousel on autoplay, changing the slides every 5 seconds, and also add “previous” and “next” buttons to change the slides manually.

The 5-second interval runs nonstop, so whenever I start manually interacting with the slider, say clicking on its element or its previous/next buttons, the autoplay quickly catches up and changes the slide once again.

I’d like the autoplay to stop when the user first interacts with any element of the slider. Or, if that’s not possible, reset the delay whenever there is such interaction, so the slide doesn’t change abruptly.

This is a minimal live demo showcasing the code: https://codepen.io/hyades/pen/abzVREV

const mySiema = new Siema({
    duration: 500,
    loop: true,
    easing: "cubic-bezier(.42,0,.58,1)",
    draggable: false,
});

document.querySelector(".prev").addEventListener("click", () => {
    mySiema.prev();
});
document.querySelector(".next").addEventListener("click", () => {
    mySiema.next();
});

setInterval(() => mySiema.next(), 5000);

Answer 1

To reset setInterval, use clearInterval as follow:

Defined as variable

var intervalID = setInterval(YourFunction, 5000);

To reset

clearInterval(intervalID);