如何在自动播放激活并到达滑块末端时停止滑块滑块?

问题描述 投票:0回答:1

如何在自动播放激活并到达幻灯片结束时停止滑块?

目前,滑块在到达末端滑动后保持循环到第一张滑动。

它使用的是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',
  },
});   
javascript jquery swiper
1个回答
1
投票

你可以听slideChange事件并检查你的swiper实例isEnd属性 - 如果是,你设置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

有关活动的文件:http://idangero.us/swiper/api/#events

© www.soinside.com 2019 - 2024. All rights reserved.