vue实现自动轮播的问题

Question

如下图，我想做成一个自动轮播的笑过，但是不会做，想请教大神一下。
如图1，从右向左自动轮播，当鼠标放到上面的时候就停止轮播，鼠标离开的时候开始轮播，这个应该怎么做？
能提供以下详细的代码吗？多谢

Answer 1

轮播的原理其实就是移动你dom的位置，然后让可见的不可见，不可见的可见，其中你可以选用改变你这个列表的left或者用transform: translateX 来实现1.纯css: 写animation动画呗，不断改变translateX 然后hover的时候设置animation-play-state pause暂停。思路是这样可能但是可能不是很好操控细节2.用js 写一个setTimeout或者raf之类不断改变translateX,然后绑定onmouseenter onmouseleave事件，设置一个flag，或者直接在两个时间里面移除定时和开启定时。思路大概就是这样吧，具体细节肯定还是有需要打磨的，可以看一下网上很多轮播图的源码参考一下