Vue 实现无缝轮播

很多网站都会有轮播图的需求，而简单的轮播图实现通常会在展示完最后一个子项后停止轮播，或者跳回到第一个子项重复轮播过程，这样的交互效果往往是存在断层的。接下来介绍如何实现一个无缝的轮播图，达到这样的效果：

预览地址：https://codepen.io/JunreyCen/pen/OYBvdw

核心思想其实非常简单：

1. 当轮播到边界子项（Item 3），并继续进行横移时，把即将要展示的子项（Item 1）挪到紧挨着 Item 3 的位置，执行横移，如下图 Step 1；

2. 由于此时活跃子项的索引（index > 2）已经超出范围，在下一次横移进行前，需要把索引调整到合理范围内，并重置子项的位置，如下图 Step 2。注意，这一步需要把 transition 关闭，不然 “偷梁换柱” 的过程会被一览无遗。

“偷梁换柱” 过程

这里提供一份完整的代码实现。我稍微做了点优化，支持

• 左、右两个方向轮播
• 一次切换多个子项

原理上无非是支持多个子项的同时 “偷梁换柱” 罢了，详细的可以关注代码中的 next 函数。

代码已发布在 github 上，欢迎大家提 issue 交流。