如何在激活自动播放并到达幻灯片结束时停止滑块?
目前滑块在到达结束幻灯片后继续循环到第一张幻灯片。
它使用的是4.0.7版本
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
的js
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
loop:false,
autoplay: {
delay: 2500,
disableOnInteraction: false,
stopOnLast: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
答案 0 :(得分:1)
您可以收听活动slideChange
并检查您的swiper实例中的属性isEnd
- 如果为true,则设置autoplay=false
:
swiper.on('slideChange', function(){
if(swiper.isEnd){
swiper.autoplay = false;
}
});
工作小提琴(完整示例):https://jsfiddle.net/2yhxctxf/
更新:刚刚找到了一种更简单的方法:)
swiper.on('reachEnd', function(){
swiper.autoplay = false;
})
更新了小提琴:https://jsfiddle.net/2yhxctxf/1/
.isEnd属性的文档:http://idangero.us/swiper/api/#methods