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实现匀速轮播,中间不停留的主要内容,如果未能解决你的问题,请参考以下文章

Vue使用swiper实现匀速轮播,中间不停留

vue中轮播组件,实现默认显示3张图片,中间显示全部两边显示部分

怎么用swiper实现匀速无缝轮播

vue图片轮播一次显示三张且中间一张图片可以放大缩小

swiper最少显示几张图片

Vue与swiper想结合封装全屏轮播插件