我如何 reset/stop Siema 在互动时自动播放间隔？

Question

我正在尝试纯 JavaScript 轮播插件 Siema。

我将轮播设置为自动播放，每 5 秒更换一次幻灯片，还添加了“上一个”和“下一个”按钮以手动更换幻灯片。

5 秒间隔不间断运行，所以每当我开始手动与滑块交互时，比如单击其元素或其 previous/next 按钮，自动播放会迅速赶上并再次更改幻灯片。

我希望在用户首次与滑块的任何元素交互时停止自动播放。或者，如果这不可能，只要有这种交互，就重置延迟，这样幻灯片就不会突然改变。

这是展示代码的最小现场演示：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

要重置 setInterval，请按如下方式使用 clearInterval：

定义为变量

var intervalID = setInterval(YourFunction, 5000);

重置

clearInterval(intervalID);

我如何 reset/stop Siema 在互动时自动播放间隔？

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

javascript

autoplay

carousel

siema