当用户到达轮播上的最后一张幻灯片时，循环回滑块中的第一张幻灯片

Question

我正在尝试重新创建此滑块：https://bewegen.com/en 加速自行车共享部分下。 我设法创建了计数滑块，但是当它达到结束计数 1 时，无法将其恢复到计数 9 - 顺利地让它循环回起点。

如何让计数循环回起点，如上例所示？

Here is my codepen work: https://codepen.io/harp30/pen/GYEXXe

谢谢。

Answer 1

您可以像这样修改next()函数：

function next() {
count = count + 1;
if (count > num.length - 1) {
// Clone first item and add it to the end
var clone = num[0].cloneNode(true);
countItemNumberHolder.appendChild(clone);
// Let the transition happen normally
TweenMax.to(countItemNumberHolder, 0.4, { y: -289 * count });
// Wait for transition to finish and reset transform to 0 without animation
setTimeout(function() {
TweenMax.to(countItemNumberHolder, 0, { y: 0 });
countItemNumberHolder.removeChild(clone);
}, 300);
// Now reset counter
count = 0;
} else {
TweenMax.to(countItemNumberHolder, 0.4, { y: -289 * count });
}
}

本质上，当您到达最后一个元素时，克隆第一个元素并让转换正常发生。过渡完成后，将转换重置为不带动画的0，并删除克隆的元素。同样，您可以对上一个按钮执行相同的操作。

但是，您可能希望在转换期间删除并添加事件侦听器，否则，如果用户快速单击，可能会导致意外行为。

可以在此处找到无限轮播的更简洁的实现： https://codepen.io/matthewwilliams/pen/Vayrjv