iDangerous Swiper - 对页面更改的操作

我想在每次使用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页上的某些内容)?

author: block14
采纳答案:

我能够做一些黑客来检测页面更改。

swiper-slide-active将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语句。

author: block14

参考更多解答: iDangerous Swiper - action on page change ,转载请保留出处iDangerous Swiper - 对页面更改的操作及作者信息

Statement: We respect knowledge and authors. Since the content comes from the Internet and is intended for scientific research, any reprinters should retain the author's signature and origin. If you are the author of the content and feel in dispute, please contact email: 1076545519@qq.com. We will find out the situation and deal with it in time. We sincerely thank the author for his hard work.


更多:swiper