swiper 循环切换_vue项目中使用swiper实现无缝滚动

最近在公司写活动页面时，要求将奖品进行轮播无缝滚动，在这里本人想到了有关vue的一个轮播组件vue-awesome-swiper。在使用的过程中，发现不管怎么设置swiperOption的speed和autoplay.delay参数，轮播出的效果总是会有停顿感，不能真正的实现无缝的滚动。

这是swiper标签的使用

这是data里swiper基本设置

注意的是在这里使用的swiper4.0的api与swiper3.0有部分区别

到最后找到了原因：因为swiper默认样式的移动效果是

swiper初始属性transition-timing-function： ease-out

在这里我找到w3c有关transition-timing-function属性的介绍

于是我们只需要简单的在我们的css样式里设置一下

.swiper-wrapper{

transition-timing-function:linear !important;

}

就能解决有关无缝滚动的问题

----------还有值得注意的是

需要把scoped设置给去掉不然，会导致 transition-timing-function:linear；设置不生效

还用一种方法是：.list-block /deep/ .swiper-wrapper{

transition-timing-function:linear !important;

} //设置/deep/  就可以无需去掉scoped