Я пытаюсь создать бесконечный слайдер изображений / блоков в raw JS
Я прошел стандартный путь, клонировал последний и первый кадры, вставил их до первого и после последнего кадра соответственно, поэтому ползунок выглядит следующим образом:
"clone_frame4 [frame1] frame2 frame3 frame4 clone_frame1"
Вот [] маркировка для видимой рамки
Все в порядке, кроме перемотки. Эффект, которого я хочу достичь:
- когда 'clone_frame1' закончил скольжение к видимой области;
- отключить анимацию;
- перемотать ползунок на «frame1»;
- включить анимацию;
наслаждайся бесконечным скольжением)))
вот куски кода
function enableAnimation(){
for(i = 0; i < ilen; i++){
slides[i].className += " animate";
}
}
function disableAnimation(){
for(i = 0; i < ilen; i++){
slides[i].className = slides[i].className.replace(" animate", "");
}
}
function rewindToStart(){
t1().then(t2).then(t4);
}
function t1(){
let promise = new Promise(
function(resolve, reject){resolve( disableAnimation );});
return promise;
}
function t2(){
let promise = new Promise(
function(resolve, reject){resolve( rewindSlide(0) );});
return promise;
}
function t4(){
let promise = new Promise(
function(resolve, reject){resolve( enableAnimation );});
return promise;
}
Так что я ожидаю, что моя цепочка обещаний остановит анимацию в момент t1 (), перемотает кадр 1 в момент t2 (), включив анимацию в момент t4 ().
Но, к сожалению, слайдер перематывает с анимацией. Кажется, я пытаюсь все, чтобы справиться с этим, но ничего не работает
Любая помощь будет высоко ценится