循环使用 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