tl; dr-
无需花费太多精力即可创建无限图像滑块的一种简单方法如下：为了简单起见，您可以
<n>循环滑动图像，以便在
n第一个图像之后可视化的下一个图像是
1st（并且反之亦然）。
这个想法是创建第一个和最后一个图像的克隆，以便
- 最后一张图片的副本位于第一张图片之前；
- 第一个图像的副本将附加在最后一个图像之后。
无论您的图像量是多少，您最多只需要追加2个克隆的元素。
再次为简单起见，假设所有图像都是
100px宽的，并且将它们包裹在一个容器中，您可以使用左右将其移动到剪切蒙版中
overflow:hidden。然后，所有图像都可以轻松地与容器连续对齐
display: inline-block并
white-space:nowrap设置在容器上（
flexbox现在更容易了）。
对于
n = 4DOM结构，将如下所示：
offset(px) 0 100 200 300 400 500images | 4c | 1 | 2 | 3 | 4 | 1c
在开始时，您的容器将与一起放置
left: -100px（或也
margin-left: -100px
可能更好（出于性能方面的考虑）
transform:translateX(-100px)），因此滑块可以显示第一张图像。要从一张图片切换到另一张图片，您需要在以前选择的同一属性上应用javascript动画。
当你的滑块是目前在4个图像，你必须从图像切换
4到
1c，这样的想法是在动画结束后执行的回调，不久在真正的1个重新定位你的滑盖包装ST图像偏移量（例如你设置
left:-100px到容器）
这类似于当滑块当前位于第一个元素上时：要显示先前的图像，您只需要从一个图像执行动画
1即可
4c；当动画完成后，只需移动容器即可，将滑块固定地位于第4个位置个图像偏移（例如，你设置
left:-400px的容器）。
您可以看到上面的提琴效果：这是
js/jquery我使用的最少代码（当然，甚至可以对代码进行优化，以使项目的宽度不会硬编码到脚本中）
$(function() { var gallery = $('#gallery ul'), items = gallery.find('li'), len = items.length, current = 1, first = items.filter(':first'), last = items.filter(':last'), triggers = $('button'); first.before(last.clone(true)); last.after(first.clone(true)); triggers.on('click', function() { var cycle, delta; if (gallery.is(':not(:animated)')) { cycle = false; delta = (this.id === "prev")? -1 : 1; gallery.animate({ left: "+=" + (-100 * delta) }, function() { current += delta; cycle = (current === 0 || current > len); if (cycle) { current = (current === 0)? len : 1; gallery.css({left: -100 * current }); } }); } });});如前所述，此解决方案不需要太多的工作和性能，只需将这种方法与不带循环的普通滑块进行比较即可，它仅需要在初始化滑块时再进行两次DOM插入，以及一些（非常琐碎的）额外逻辑管理后退/前进循环。
这是另一个示例，当您一次看到两个元素时：在这种情况下，您需要克隆更多的元素并对逻辑进行一些简单的更改
我不知道是否存在更简单或更佳的方法，但希望无论如何会有所帮助。
