Question

140

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

rated 0 times [ 141] [ 1] / answers: 1 / hits: 15138 / 7 Years ago, wed, december 20, 2017, 12:00:00

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',

  },

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eanskylerg

Add To Favorites

Follow

Total Points: 524

Total Questions: 107

Total Answers: 100

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

eanskylerg questions

1 React Router v6 : How to render multiple component inside and outside a div with the same path

Sat, Feb 19, 22, 00:00, 2 Years ago

1 dotenv: command not found in nestjs project

Sat, Oct 30, 21, 00:00, 3 Years ago

1 How can I resolve the TypeScript Compiler error Namespace 'NodeJS' has no exported member 'Global'?

Mon, Jul 5, 21, 00:00, 3 Years ago

1 Limit x-axis in Apexcharts.js

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Cannot use import statement outside a module in Vuejs. Template Django

Sat, Jan 23, 21, 00:00, 3 Years ago

View All

answered 7 Years ago shannon · Accepted Answer

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.net/2yhxctxf/

Update: just found an easier way :)

swiper.on('reachEnd', function(){

    swiper.autoplay = false;

})

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

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

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