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>