iDangerous Swiper，将幻灯片设置为不同的计时器

Question

I cannot seem to get my swiper to have different times set to each individual slide. For example, if I had 5 slides, each slide would autoplay but based on different timers. Slide 1 would be 5000ms, Slide 2 would be 10000ms, etc...

This is what I have so far but it doesn't seem to want to work.

JS: - Method 1

 var mySwiper = new Swiper('.swiper-container', {
     nextButton: '.r_control',
     prevButton: '.l_control',
     slidesPerView: 1,
     paginationClickable: true,
     spaceBetween: 30,
     autoplay: 5000,
     autoplayDisableOnInteraction: false,
     preloadImages: false, /* May not need */
     lazyLoading: true, /* May not need */
     loop: true,
     onSlideChangeEnd: function ( swiper ) {
        // Set individual timeout for autoplay
        var currentSlideIndex = swiper.activeIndex,
            timeout = $( swiper.slides[ currentSlideIndex ] ).data( "timeout" );

        if ( timeout === undefined || timeout === '' || timeout === 0) {
            timeout = 1000;
        }

        setTimeout( function () {
            swiper.slideNext();
        }, timeout );
    }
});

HTML: - Used for both Methods

<!-- Start of 'Slide #1' -->
<div class="swiper-slide" data-timeout="8000"> <!-- data-timeout specified here next to 'swiper-slide' class for each slide -->
    <div class="swiper-slide_img">
        <!-- Start of 'Link' -->
        <a target="_blank" href="#">
            <div class="image"></div>
        </a>
        <!-- End of 'Link' -->
    </div>
</div>
<!-- End of 'Slide #1' -->

I've also tried this approach below but no luck.

JS: - Method 2

// Set individual slide timeout for dynamic autoplay
var setSwiperSlideTimeout = function ( swiper ) {
    var timeout = $( swiper.slides[ swiper.activeIndex ] ).data( "timeout" );

    if (timeout === undefined || timeout === "" || timeout === 0) {
        timeout = 1000;
    }

    swiper.params.autoplay = timeout;
    swiper.update();
    swiper.startAutoplay();
};

var mySwiper = new Swiper('.swiper-container', {
     nextButton: '.r_control',
     prevButton: '.l_control',
     slidesPerView: 1,
     paginationClickable: true,
     spaceBetween: 30,
     autoplay: 5000,
     autoplayDisableOnInteraction: false,
     preloadImages: false, /* May not need */
     lazyLoading: true, /* May not need */
     loop: true,
     onInit: function ( currentSwiper ) {
            currentSwiper.stopAutoplay();
            setSwiperSlideTimeout( currentSwiper );
        },
        onSlideChangeEnd: function ( currentSwiper ) {
            currentSwiper.stopAutoplay();
            setSwiperSlideTimeout( currentSwiper );
        }

Why are these two methods not working? What am I doing wrong here?

Answer 1

Figured it out. Method 2 works BUT instead of hard-coding autoplay option to 5000, I had to set that to 0. Here is the full code for others having this same issue:

JS:

// Set individual slide timeout for dynamic autoplay
var setSwiperSlideTimeout = function ( swiper ) {
    var timeout = $( swiper.slides[ swiper.activeIndex ] ).data( "timeout" );

    if (timeout === undefined || timeout === "" || timeout === 0) {
        timeout = 1000;
    }

    swiper.params.autoplay = timeout;
    swiper.update();
    swiper.startAutoplay();
};

var mySwiper = new Swiper('.swiper-container', {
    nextButton: '.r_control',
    prevButton: '.l_control',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    autoplay: 0, // CHANGED THIS FROM 5000 to 0
    autoplayDisableOnInteraction: false,
    preloadImages: false, /* May not need */
    lazyLoading: true, /* May not need */
    loop: true,
    onInit: function ( currentSwiper ) {
        currentSwiper.stopAutoplay();
        setSwiperSlideTimeout( currentSwiper );
    },
    onSlideChangeEnd: function ( currentSwiper ) {
        currentSwiper.stopAutoplay();
        setSwiperSlideTimeout( currentSwiper );
    }

HTML:

<!-- Start of 'Slide #1' -->
<div class="swiper-slide" data-timeout="8000"> <!-- data-timeout specified here next to 'swiper-slide' class for each slide -->
    <div class="swiper-slide_img">
        <!-- Start of 'Link' -->
        <a target="_blank" href="#">
            <div class="image"></div>
        </a>
        <!-- End of 'Link' -->
    </div>
</div>
<!-- End of 'Slide #1' -->

Answer 2

iDangerous recently made available a native parameter to easily allow individual delay configurations. You may set a generic autoplay delay in the swiper code:

var mySwiper = new Swiper ('.swiper-container', {
   speed: 300,
   autoplay: {
      delay: 5000,
   },
});

And set specific ones in the targeted slides as well, like the following:

<div class="swiper-slide" data-swiper-autoplay="2000">Content</div>

The individual statements will only work if autoplay is set in the swiper code.

I am not sure which release received this new parameter, thus you may want to download the last one available. (Working on v.4.5.0)