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

时间:2017-03-02 13:40:12

标签: javascript jquery swiper autoplay

我正在使用此代码初始化滑块滑块。

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

由于滑块位于页面的第四部分内部并且仅在页面向下滚动后才可见,因此我想在滑块进入视口后才启动自动播放。 有没有办法做到这一点?

3 个答案:

答案 0 :(得分:4)

假设您正在尝试在第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.
      }
    }
}) 

答案 1 :(得分:3)

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

});

答案 2 :(得分:0)

您可能会使用类似jquery的内容 - https://github.com/morr/jquery.appear

wget https://github.com/rabbitmq/rabbitmq-perf-test/releases/download/v1.2.0/rabbitmq-perf-test-1.2.0-bin.zip

unzip rabbitmq-perf-test-1.2.0-bin.zip

cd rabbitmq-perf-test-1.2.0/

bin/runjava com.rabbitmq.perf.PerfTest