如何在滑块进入视口后才启动Swip er滑块的自动播放？

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

假设你正在试玩第四张幻灯片：

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

Answer 2

var mySwiper = new Swiper('.swiper-container', {
   autoplay: {
    delay: 5000,
  },

});

Answer 3

你可能会使用类似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
  }) 
});