Question

我想在每次使用iDangerous Swiper jQuery插件更改页面时交换图像。

可以通过手指在视图之间拖动或在代码中使用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（）中调用另一个函数，但这似乎只在单击文本时调用，而不是在滑动时调用。

有什么方法可以在页面更改时进行监听，或者我可以使用hack来检测何时使用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语句。

iDangerous Swiper - 对页面更改的操作

1 个答案: