0

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() 内で別の関数を呼び出すことでしたが、これはスワイプ時ではなく、テキストをクリックしたときにのみ呼び出されるようです。

ページが変更されたときにリッスンできる方法や、jQuery を使用してビューポートに要素 (つまり、ページ 1 または 2 の何か) が表示されていることを検出するために使用できるハックはありますか?

4

1 に答える 1

2

ページの変更を検出するためにちょっとしたハックを行うことができました。

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 ステートメントを使用できます。

于 2014-01-14T16:14:44.070 に答える