iDangerous Swiper - 页面更改操作答案

【问题标题】：iDangerous Swiper - action on page changeiDangerous Swiper - 页面更改操作
【发布时间】：2014-01-13 22:40:50
【问题描述】：

我想在每次使用 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() 中调用另一个函数，但这似乎只在单击文本时调用，而不是在滑动时调用。

有没有一种方法可以让我在页面更改时进行监听，或者我可以使用 hack 来检测元素（即第 1 页或第 2 页上的某些内容）何时使用 jQuery 在视口中显示？

【问题讨论】：

标签： jquery swiper

【解决方案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 语句。

【讨论】：