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可以使用BUT，而不是将autoplay硬编码选项设置为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>

仅当在滑动代码中设置了自动播放时，单个语句才起作用。

我不确定哪个版本收到了这个新参数，因此您可能要下载最后一个可用的参数。 （正在处理v.4.5.0）