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

Question

我似乎无法让我的狙击手为每张幻灯片设置不同的时间。例如，如果我有5张幻灯片，每张幻灯片将自动播放，但基于不同的计时器。幻灯片1将是5000毫秒，幻灯片2将是10000毫秒等...

这是我到目前为止所做的，但它似乎并不想工作。

JS： - 方法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： - 用于两种方法

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

我也试过这种方法，但没有运气。

JS： - 方法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 );
        }

为什么这两种方法不起作用？我在这做错了什么？

Answer 1

弄清楚了。方法2工作但不是将自动播放选项硬编码为5000，我必须将其设置为0.以下是其他具有相同问题的完整代码：

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最近提供了一个原生参数，可以轻松实现各种延迟配置。您可以在滑动代码中设置通用自动播放延迟：

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

并在目标幻灯片中设置特定的，如下所示：

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

只有在swiper代码中设置了自动播放时，各个语句才有效。

我不确定哪个版本收到了这个新参数，因此您可能想要下载最后一个可用的版本。 （工作于第4.5.0节）