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

我正在使用此代码来初始化swiper滑块。如何仅在滑块进入视口后才开始自动播放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 
})

由于滑块位于页面的第四节里，是页面滚动下来后，才看得见，我想就自动播放启动滑块进入检视之后。有没有办法做到这一点？

来源

2017-03-02 Goran Tesic

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

来源

2017-03-02 14:19:53 dmoo

假设你在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. 
     } 
    } 
})

来源

2017-10-17 14:02:15 Adam

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

回答

相关问题