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，设置幻灯片到不同的计时器

2 个答案: