自动播放激活并到达幻灯片末尾时如何停止滑动滑块？

Question

如何在自动播放激活并到达幻灯片末尾时停止滑块？

当前滑块在到达结束幻灯片后继续循环到第一张幻灯片。

它使用的是版本 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',
  },
});

Answer 1

您可以收听事件 slideChange 并检查您的滑动器实例是否有属性 isEnd - 如果为真，您设置 autoplay=false:

swiper.on('slideChange', function(){
if(swiper.isEnd){
    swiper.autoplay = false;
  }
});

工作 fiddle（完整示例）：https://jsfiddle.net/2yhxctxf/

更新：刚刚找到了一个更简单的方法:)

swiper.on('reachEnd', function(){
    swiper.autoplay = false;
})

已更新 fiddle：https://jsfiddle.net/2yhxctxf/1/

关于 .isEnd 属性的文档：http://idangero.us/swiper/api/#methods

事件记录：http://idangero.us/swiper/api/#events

自动播放激活并到达幻灯片末尾时如何停止滑动滑块？

How to stop swiper slider when autoplay activated and reaching end of slide?

javascript

jquery

swiper