Swiper实现无缝匀速滚动的方法

Posted 2023-05-02

参考技术A 样式

JS

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;
	

---

完成！！！