如何仅在滑块进入视口后才开始自动播放 Swiper 滑块？答案

【问题标题】：How to make autoplay of the Swiper slider start only after the slider enters viewport?如何仅在滑块进入视口后才开始自动播放 Swiper 滑块？
【发布时间】：2017-03-02 13:40:11
【问题描述】：

我正在使用此代码来初始化 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
})

由于滑块位于页面的第四部分内，并且只有在页面向下滚动后才可见，所以我想仅在滑块进入视口后才开始自动播放。有没有办法做到这一点？

【问题讨论】：

标签： javascript jquery swiper autoplay

【解决方案1】：

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

});

【讨论】：

欢迎来到 SO :-) 请解释为什么这段代码可以解决问题。看How to Answer
你还没有解释这是如何解决问题的，这无论如何也解决不了问题。

【解决方案2】：

假设您正在尝试播放第四张幻灯片：

var mySwiper = new Swiper ('.swiper-container', {
    // 可选参数
    分页：'.swiper-分页'，
    分页可点击：真，
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    间隔：0，
    视差：真实，
    自动播放：5000，
    速度：800，
    autoplayDisableOnInteraction：假，
    onSlideChangeStart：函数{
      if (s.activeIndex === 3) {
          // 在这里做点什么，第四张幻灯片现在处于活动状态，依此类推
          console.log('嗨！尝试到达第四张幻灯片');
          s.startAutoplay(); // 在第四张幻灯片上调用自动播放。
      }
    }
})

【讨论】：

【解决方案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
  }) 
});

【讨论】：