Swiper: Change Autoplay by Slide

[danielcpereira11]

Hey!

First of all, congratulations for this great plugin! 💯

I was developing a slider and the request for my user was that he could change the speed of the autoplay for each slide, so that the text below the image with enough time; a bigger text would mean longer time on autoplay. I've searched for this within the documentation and couldn't find it.

I developed a solution for this based on your watcher onAutoplay and I wanted to share it with you, maybe it can be useful.

Basically what I did was add a class to a slide, "speed-x", in which x is how long in milliseconds the autoplay must run. So, for example, a slide with the class speed-8000 would stay visible for 8 seconds, but one with the class speed-2000 would only be visible for 2000 seconds.

I use jQuery to read the class on slide-active, parse the number on it, and then change the autoplay value with it.

I'm a noob in javascript, so my code may not be the best. How do I share it with you? I'm not used to Git as well.

Thanks in advance.

[nolimits4web]

Hi, thanks! You can just share your code here and i will implement in swiper's core as required

[danielcpereira11]

So, for the HTML, I did the following:

<div class="swiper-container swiper-1">
              <div class="swiper-wrapper">
                  <!-- Slides -->
                  <div class="swiper-slide speed-8000">
                    <div class="imagem" style="background:url('../images/adapted_background.png'); background-size:cover;"></div>
                  </div>
                  <div class="swiper-slide speed-10000">
                    <div class="imagem" style="background:url('../images/adapted_background2.png'); background-size:cover;"></div>
                  </div>
                  <div class="swiper-slide speed-13000">
                    <div class="imagem" style="background:url('../images/adapted_background3.png'); background-size:cover;"></div>
                  </div>
              </div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
</div>

And for the Javascript:

var swiper = new Swiper('.swiper-1', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        watchActiveIndex: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        loop: true,
        autoplayDisableOnInteraction: false,
        onAutoplay: function (swiper) {

                var className = $('.swiper-slide-active').attr('class');

                className = className.replace ( /[^\d.]/g, '' );

                swiper.params.autoplay = className;

                console.log(swiper.params.autoplay);
        }
});

Thanks!

[nolimits4web]

Ok, thanks, i'll add something like this to the library

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.