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：

// 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语句。