如何僅在滑塊進入視口後纔開始自動播放Swiper滑塊？

Question

我正在使用此代碼來初始化swiper滑塊。

var mySwiper = new Swiper ('.swiper-container', { 
    // Optional parameters 
    pagination: '.swiper-pagination', 
    paginationClickable: true, 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 0, 
    parallax: true, 
    autoplay: 5000, 
    speed: 800, 
    autoplayDisableOnInteraction: false 
}) 

由於滑塊位於頁面的第四節裏，是頁面滾動下來後，纔看得見，我想就自動播放啓動滑塊進入檢視之後。 有沒有辦法做到這一點？

Answer 1

你可能使用類似jQuery的出現 - https://github.com/morr/jquery.appear

$('mySwiperContainer').on('appear', function(event, $all_appeared_elements) { 
    // this element is now inside browser viewport 
    var mySwiper = new Swiper ('.swiper-container', { 
    // Optional parameters 
    pagination: '.swiper-pagination', 
    paginationClickable: true, 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 0, 
    parallax: true, 
    autoplay: 5000, 
    speed: 800, 
    autoplayDisableOnInteraction: false 
    }) 
}); 

Answer 2

假設你在4幻燈片播放嘗試：

var mySwiper = new Swiper ('.swiper-container', { 
    // Optional parameters 
    pagination: '.swiper-pagination', 
    paginationClickable: true, 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 0, 
    parallax: true, 
    autoplay: 5000, 
    speed: 800, 
    autoplayDisableOnInteraction: false, 
    onSlideChangeStart: function(s){ 
     if (s.activeIndex === 3) { 
      // do something here, 4th slide is active now and so on 
      console.log('hi! Try to reach 4th slides'); 
      s.startAutoplay(); // calling autoplay on 4th slides. 
     } 
    } 
})