Как остановить слайдер swiper, когда автозапуск активирован и достигает конца слайда?

Как остановить слайдер, когда автозапуск активирован и достигает конца слайда?

в настоящее время ползунок продолжает циклически переходить к первому слайду после достижения конечного слайда.

Он использует версию 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
person Wildan Muhlis    schedule 20.12.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете прослушать событие 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

person konrad_pe    schedule 20.12.2017
comment
Это работает, спасибо! :) - person Wildan Muhlis; 20.12.2017