我有一个带有translate3d
拖动选项的旋转木马。考虑到使用translate3d
转到下一张幻灯片,我最终翻译到轮播的结尾。您能帮我找到解决方案吗?
下一张幻灯片逻辑:
goNext() {
this.carousel.style.transform = `translate3d(${-(++this.elementIndex * this.album.clientWidth)}px,0,0);
}
[当我到达旋转木马的尽头时:我知道我可以在末尾将其转换为0,但是我希望在最后一张幻灯片上保留拖动选项,并能够将其拖动到下一张幻灯片上。有什么想法吗?
窍门是:
将最后一个图像的克隆放置到轮播的开始处,将第一个图像克隆到转盘的末端(在初始化期间)。
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