Resetting/stopping autoplay interval count on user interaction?

[patrulea]

Hello! I’ve been loving Siema for how simple it is; even for me, who doesn’t know anything about JavaScript. I managed to set a simple carousel for my design portfolio with autoplay, previous/next buttons and looping.

My problem is the 5-second autoplay interval runs nonstop, so whenever I start manually interacting with the slider (changing the slide), the autoplay quickly catches up and changes the slide once again, which I find annoying.

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

This might seem trivial but I’ve tried solving this, but without success.

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

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

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

[pawelgrzybek]

Hi.

Thanks for using Siema. Look at the snippet of code that I amended for you. Hopefully the comments that i added make sense and helped you out to solve your issue :)

Have a great day :)

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

// I assigned an interval to a variable `myInterval`
const myInterval = setInterval(() => mySiema.next(), 5000);

document.querySelector(".prev").addEventListener("click", () => {
  mySiema.prev();
  // each time I click a prev button
  // i would like to clear an interval asigned to a name `myInterval`
  clearInterval(myInterval)
});
document.querySelector(".next").addEventListener("click", () => {
  mySiema.next();
  // each time I click a next button
  // i would like to clear an interval asigned to a name `myInterval`
  clearInterval(myInterval)
});

[patrulea]

That worked, thank you! It would be nice to see snippets like this linked to the documentation so it‘s friendlier to newbies like me. Anyway, I’m loving the plugin.

[patrulea]

One additional question. What EventListener should I use on the slider to clear myInterval on slide dragging as well?

document.querySelector(".siema").addEventListener("drag", () => {
         clearInterval(myInterval);
});

I tried that with no success.

[pawelgrzybek]

click

[patrulea]

I tried with click before asking but the issue with that is it only clears myInterval if the user clicks/taps without dragging (which I wouldn’t expect to be the common behavior, especially for mobile users). If the user drags the slider, the interval keeps running.

Is there any other EventListener that would trigger the function as soon as the user starts dragging?

[pawelgrzybek]

If this is something what you want, you will end up adding multiple listeners multiple events. This resource may help you which ones.

https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events

[patrulea]

I achieved it with mouseover. Thank you for your help! That list came in handy.

[pawelgrzybek]

No worries my friend. Have a great day 🥑