简体   繁体   English

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

[英]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.

相关问题 当视频正在播放时,在滑动器 slider 中停止自动播放,当视频暂停或结束时,移动到下一张幻灯片 - Stop the autoplay in swiper slider when the video is playing and move to next slide when video is paused or ended 在鼠标进入时停止滑动滑动自动播放并在鼠标离开时开始自动播放 - Stop swiper slide autoplay on mouse enter and start autoplay on mouse leave 将滑块/滑动器设置为从第一张幻灯片自动播放 - Set slider/swiper to autoplay from 1st slide swiper.js | 鼠标进入时停止滑动自动播放并在鼠标离开时开始自动播放 - swiper.js | Stop swiper slide autoplay on mouse enter and start autoplay on mouse leave Swiper js 自动播放滑块 - Swiper js autoplay slider 我的 Swiper.js 滑动器在用手指滑动后停止自动播放,为什么? - My swiper with Swiper.js stop autoplay after slide it with finger, why? 当 swiper 幻灯片处于活动状态时使用动画更改 css - Slider Swiper - Change css with animation when swiper slide is active - Slider Swiper 如何从滑动滑块中的幻灯片获取文本 - How to get text from slide in swiper slider 如何在一张幻灯片中针对特定条件禁用 swiper 上的自动播放? - How can I disable autoplay on swiper for a particular condition in one slide? swiper api - 如何阻止幻灯片过度滚动 - swiper api - how to stop a slide from overscrolling
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM