iDangerous Swiper，設置幻燈片到不同的定時器

我似乎無法讓我的sw have具有不同的時間設置爲每個單獨的幻燈片。例如，如果我有5張幻燈片，每張幻燈片都會自動播放，但會根據不同的定時器進行播放。幻燈片1將是5000ms，幻燈片2將是10000ms等...iDangerous Swiper，設置幻燈片到不同的定時器

這是我迄今爲止，但它似乎並不想工作。

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); 
     }

爲什麼這兩種方法不工作？我在這裏做錯了什麼？

來源

2016-10-28 Michael

想通了。方法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' -->

來源

2016-10-28 19:31:31 Michael

iDangerous Swiper，設置幻燈片到不同的定時器

回答

相關問題