스 와이퍼 슬라이더의 자동 재생은 슬라이더가 뷰포트에 들어간 후에 만 ​​시작 하시겠습니까?

Question

나는이 코드를 사용하여 스와이퍼 슬라이더를 초기화하고 있습니다. 슬라이더가 페이지의 네번째 섹션 내부에 위치하여 페이지가 아래로 스크롤 한 후에 만 ​​표시되어 있기 때문에

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

는, I는 자동 실행 슬라이더가 뷰포트에 진입 한 후에 만 ​​시작하고 싶다. 이렇게하는 방법이 있습니까?

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