Vue使用swiper实现匀速轮播,中间不停留
Posted NYYandYF
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue使用swiper实现匀速轮播,中间不停留相关的知识,希望对你有一定的参考价值。
最终实现效果:
提示:使用前记得先下载引入 Swiper 呦!!!
vue html中放入
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide style="margin-right: 0px;" v-for="(items,indexs) in listImg" :key="indexs">
<img :src="items.url" alt="">
</swiper-slide>
</swiper>
vue data中放入
swiperOption:
speed: 5000, //匀速时间
freeMode:true,
loop: true,
autoplay:
delay:0,
stopOnLastSlide: false,
disableOnInteraction: false
,
slidesPerView: 3,
loopFillGroupWithBlank: true,
normalizeSlideIndex:true
,
vue css中
::v-deep .swiper-container-free-mode>.swiper-wrapper
-webkit-transition-timing-function: linear; /*之前是ease-out*/
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
margin: 0 auto;
完成!!!
以上是关于Vue使用swiper实现匀速轮播,中间不停留的主要内容,如果未能解决你的问题,请参考以下文章