循环使用translate3d制作的轮播 [英] Looping a carousel made with translate3d

问题描述

我有一个带有 translate3d 拖动选项的旋转木马。考虑到使用 translate3d 转到下一张幻灯片，我最终翻译到轮播的结尾。您能帮我找到解决方案吗？

I have a carousel that has drag option made with translate3d. Taking into consideration that is use translate3d to go to the next slide, i end up translating to the end of the carousel. Can you help me finding a solution?

下一幻灯片逻辑：

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

当我到达轮播结束时：
我知道我可以在最后将其转换为0，但是我希望在最后一张幻灯片上保留拖动选项，并能够将其拖动到下一张幻灯片上。有想法吗？

When i get to the end of the carousel: I know that i can translate to 0 at the end but i want on the last slide to keep the drag option and to be able to drag to the first slide looking like is the next. Any ideas?

推荐答案

诀窍是：

• 将最后一个图像的克隆放置到轮播的开始处，将第一个图像克隆到转盘的末端（在初始化期间）。

• place a clone of last image to the beginnig of carousel and first image to the end of carousel (during initialization).

5 [1 2 3 4 5] 1

当用户在最后一张幻灯片上单击下一张时，应将其切换到没有动画的第一张幻灯片（克隆为 5），然后可以将其转换为带有动画的 1

when user clicks "next" at the last slide you should switch it to the very first slide (cloned "5") without animation, and then you can transform it to "1" with animation

1）5 1 2 3 4 [5] 1

2）[5] 1 2 3 4 5 1

3）5 [1] 2 3 4 5 1

这篇关于循环使用translate3d制作的轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！