swiper无停顿自动匀速轮播

swiper无停顿自动匀速轮播

swiper无间断自动匀速轮播

在这里插入图片描述

<div class="swiper-container swiper-about0301">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<img src="images/about-01.jpg"/>
		</div>
		<div class="swiper-slide">
			<img src="images/about-02.jpg"/>
		</div>
		<div class="swiper-slide">
			<img src="images/about-03.jpg"/>
		</div>
		<div class="swiper-slide">
			<img src="images/about-04.jpg"/>
		</div>
		<div class="swiper-slide">
			<img src="images/about-05.jpg"/>
		</div>
		<div class="swiper-slide">
			<img src="images/about-06.jpg"/>
		</div>
	</div>
</div>

<script>
	var about0301 = new Swiper('.swiper-about0301', {
		slidesPerView: 4.5,
		spaceBetween: 15,
		speed: 10000,//切换速度
		loopedSlides: 6,
		loop: true,//循环
		autoplay: {
			delay: 0,//切换间隔
			stopOnLastSlide: false,//切换到最后一个时不停止自动播放
			disableOnInteraction: false,//触碰后不停止自动播放
		},
		breakpoints: {
			780: {  //当屏幕宽度小于等于780
				slidesPerView:2.8,
				spaceBetween: 10
			},
		}
	})
</script>

注:设置切换间隔 delay: 0, 切换速度 speed: 10000
第二个反向滚动添加 dir=“rtl”

<div class="swiper-container swiper-about0302" dir="rtl">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
		</div>
	</div>
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值