CODEWITHSUNDEEP
jquerysliderswiper.js
Mike Sweeney
Mike Sweeney

Reputation: 295

idangerous swiper; Adjusting options on the fly?

Using idangerous' Swiper, I've been trying to change options on the fly, in a click event. For instance, I want to stop the auto play after the pagination buttons are clicked.

I've tried things from the API like:

var mySwiper = new Swiper('.index-slider', { 
        mode: 'horizontal',
        paginationClickable: true,
        pagination: '.pagination',
        autoplay: 2000,
        loop: true
    });

    $('.pagination').on('click',function() {
        mySwiper.stopAutoplay();
        mySwiper.params.autoplay = 10000
        mySwiper.reInit();
    });

Multiple variations of that above. I've also tried disabling the loop. The autoplay doesn't slow down, or stop, or anything. If I console.log(mySwiper.params.autoplay); it does indeed show that the value has been updated, it just doesn't do anything ;(

Am I completely off on this? Or can you not change options after initialization?

Upvotes: 1

Views: 13410

Answers (1)

Vladimir Kharlampidi
Vladimir Kharlampidi

Reputation: 9867

Ok, it seems like you do it right. But few things.

  • Remove this line mySwiper.reInit();
  • If you need to start autoplay again after click on pagination you need to call startAutoPlay, not reInit
  • Use dev version of swiper, because in actual stable version stopAutoplay doesn't work properly

So your code should be like:

var mySwiper = new Swiper('.index-slider', { 
    mode: 'horizontal',
    paginationClickable: true,
    pagination: '.pagination',
    autoplay: 2000,
    loop: true
});

$('.pagination').on('click',function() {
    mySwiper.stopAutoplay();
    mySwiper.params.autoplay = 10000
    mySwiper.startAutoplay();
});

Upvotes: 5

Related Questions