iDangerous Swiper - действие на смену страницы

Question

Я хочу обмениваться изображениями каждый раз, когда страница изменяется с помощью плагина jQuery iDangerous Swiper.

Страница может быть изменена путем перетаскивания между видами пальцем или использованием mySwiper.swipePrev() в коде. Каждый раз, когда он изменяется, мне нужно изменить изображение src, которое показывает, какая страница отображается. Есть только 2 разных вида.

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:

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

Моя первая мысль была вызвать другую функцию в mySwiper.swipeNext(), но это, кажется, называется только при нажатии текст, а не при прокручивании.

Есть ли способ, которым я могу слушать, когда страница изменяется или взломать, которую я могу использовать, чтобы определить, когда элемент (то есть на странице 1 или 2) отображается в порт представления с помощью jQuery?

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.