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