Как автоматически запустить Siema после задержки? - PullRequest
Новая
       28

Как автоматически запустить Siema после задержки?

0 голосов
/ 15 марта 2020

У меня есть страница, на которой я установил задержку 6 с для автоматической прокрутки к основному контенту, который включает ползунок Siema. Я настроил Siema для автоматического воспроизведения слайдов и менял их каждые 250 мс. Проблема в том, что, когда страница прокручивается до содержимого, через 6 секунд Siema уже воспроизвела пару слайдов.

Я бы хотел, чтобы автозапуск начался либо тогда, когда Siema находится на странице, либо после Задержка 6с. Как мне этого добиться?

Вот весь мой код Siema. 

function printSlideIndexWithIndicator() {
    let currentSlide = this.currentSlide;
    let currentSelector = document.querySelector('.siema-current');
    let totalSelector = document.querySelector('.siema-total');
    if (currentSlide < 0) {
       currentSelector.innerHTML = this.innerElements.length + currentSlide + 1;
    } else {
        currentSelector.innerHTML = this.currentSlide + 1;
    }
    totalSelector.innerHTML = this.innerElements.length;
}
const mySiema = new Siema({
    duration: 250,
    loop: true,
    easing: "cubic-bezier(.42,0,.58,1)",
    onInit: printSlideIndexWithIndicator,
    onChange: printSlideIndexWithIndicator,
});

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

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