javascript - 循环使用 translate3d 制作的旋转木马

Question

我有一个旋转木马，它具有使用 translate3d 制作的拖动选项。考虑到使用 translate3d 转到下一张幻灯片，我最终翻译到轮播的末尾。你能帮我找到解决办法吗？

下一张幻灯片逻辑:

    goNext() {
    this.carousel.style.transform = `translate3d(${-(++this.elementIndex * this.album.clientWidth)}px,0,0);
    }

当我到达旋转木马的尽头时: 我知道我可以在最后转换为 0，但我希望在最后一张幻灯片上保留拖动选项并能够拖动到第一张幻灯片，就像下一张幻灯片一样。有什么想法吗？

Answer 1

诀窍是:

• 将最后一张图片的克隆放在轮播的开头，将第一张图片的克隆放在轮播的结尾(在初始化期间)。

  5 [1 2 3 4 5] 1

• 当用户在最后一张幻灯片上单击“下一步”时，您应该将它切换到没有动画的第一张幻灯片(克隆“5”)，然后您可以将其转换为有动画的“1”

  1) 5 1 2 3 4 [5] 1

  2) [5] 1 2 3 4 5 1

  3) 5 [1] 2 3 4 5 1