iDangerous Swiper - 페이지 변경시의 행동

Question

iDangerous Swiper jQuery 플러그인을 사용하여 페이지를 변경할 때마다 이미지를 교환하고 싶습니다.

손가락으로보기를 드래그하거나 코드에 mySwiper.swipePrev()을 사용하여 페이지를 변경할 수 있습니다. 변경 될 때마다 어떤 페이지가 표시되는지 보여주는 이미지의 src을 변경해야합니다. 단 두 가지 다른보기가 있습니다.

HTML :

<!-- Source should change based on which page you are on --> 
<img class="navbar" src="navbar-firstpage.png" /> 

<!-- First page --> 
<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide" data-hash="page1"> 
      Slide 1 
      <p onClick="mySwiper.swipeNext()">Go to next page</p> 
     </div> 
    </div> 
</div> 

<!-- second page --> 
<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide" data-hash="page2"> 
      Slide 1 
      <p onClick="mySwiper.swipePrev()">Go to last page</p> 
     </div> 
    </div> 
</div> 

jQuery를 : 내 첫번째 생각은 mySwiper.swipeNext() 내의 다른 함수를 호출했지만,이 클릭하는 경우에만 호출 할 것으로 보인다

// enable swipe between views 
var mySwiper = new Swiper('.swiper-container',{ 
}); 

문질러 댈 때가 아니라 텍스트.

jQuery와 함께 뷰 포트에 요소 (예 : 페이지 1 또는 2의 내용)가 표시 될 때 페이지를 변경하거나 해킹 할 때들을 수있는 방법이 있습니까?

Answer 1

나는 페이지 변경을 감지하기 위해 약간의 해킹을 할 수 있었다.

Swiper는 CSS 클래스 swiper-slide-active을 활성 페이지에 추가하므로 슬라이드에 해당 클래스가 있는지 확인하고 변경 한 경우이 페이지가 변경됩니다.

var mySwiper = new Swiper('.swiper-container',{ 
    onSlideChangeEnd : function(swiperHere) { 
     changeNav(); 
     var swiperPage = mySwiper.activeSlide() 
     console.log(swiperPage); 
    } 
}); 
function changeNav() { 
    if ($('#pageTwo').hasClass("swiper-slide-active")) { 
     console.log('page is 2'); 
     $('.navbar').attr("src","navbar-secondpage.png"); 
    } 
    else { 
     console.log('page is 1'); 
     $('.navbar').attr("src","navbar-firstpage.png"); 
    } 
}; 

두 개 이상의 페이지가있는 경우 try catch 문을 사용할 수 있습니다.