[英]How to stop swiper slider when autoplay activated and reaching end of slide?
How to stop slider when autoplay activated and reaching end of slide? 启动自动播放并到达幻灯片结尾时如何停止滑块?
currently the slider keep looping to first slide after reaching end slide. 目前,滑杆到达终点滑杆后继续循环播放至第一滑杆。
It's using version 4.0.7 使用的是4.0.7版
HTML 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 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',
},
});
You can listen to the event slideChange
and check your swiper instance for the property isEnd
- if true, you set autoplay=false
: 您可以监听事件
slideChange
并检查swiper实例的isEnd
属性-如果为true,则设置autoplay=false
:
swiper.on('slideChange', function(){
if(swiper.isEnd){
swiper.autoplay = false;
}
});
Working fiddle (full example): https://jsfiddle.net/2yhxctxf/ 工作小提琴(完整示例): https : //jsfiddle.net/2yhxctxf/
Update : just found an easier way :) 更新 :刚刚找到一种更简单的方法:)
swiper.on('reachEnd', function(){
swiper.autoplay = false;
})
Updated fiddle: https://jsfiddle.net/2yhxctxf/1/ 更新的小提琴: https : //jsfiddle.net/2yhxctxf/1/
Documentation on the .isEnd property: http://idangero.us/swiper/api/#methods 有关.isEnd属性的文档: http ://idangero.us/swiper/api/#methods
Documentation on the events: http://idangero.us/swiper/api/#events 有关事件的文档: http : //idangero.us/swiper/api/#events
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.