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 而不是将自动播放选项硬编码为 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）

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

iDangerous Swiper, set slides to different timers

html

javascript

jquery

custom-data-attribute

swiper