javascript - How to stop swiper slider when autoplay activated and reaching end of slide? - Stack Overflow

admin管理员组

文章数量:1356056

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

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',
  },
});   

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

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.js

Share Improve this question Follow asked Dec 20, 2017 at 7:53 Wildan MuhlisWildan Muhlis 1,61333 gold badges2525 silver badges4545 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can listen to the event slideChange and check your swiper instance for the property isEnd - if true, you set autoplay=false:

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

Working fiddle (full example): https://jsfiddle/2yhxctxf/

---

Update: just found an easier way :)

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

Updated fiddle: https://jsfiddle/2yhxctxf/1/

---

Documentation on the .isEnd property: http://idangero.us/swiper/api/#methods

Documentation on the events: http://idangero.us/swiper/api/#events

本文标签： javascriptHow to stop swiper slider when autoplay activated and reaching end of slideStack Overflow