2

1つのページで複数回動作するようにサイクルプラグインを設定しましたが、すべて正常に動作しています。タッチワイププラグインを使用してスワイプイベントを追加しようとしています。これはシングルサイクルカルーセルでは正常に機能しますが、マルチプルでは機能しません。

これが私のJavsacriptで、Cycleコードと、下部にあるTouchwipeアドオンが表示されています。

function galleries () {     

    var counter = 1

    $('.gallery .pics').each(function() {
        $(this).parent().attr('id','slideshow_'+counter);
        $(this).before('<ul class="next-prev-nav"><li><a href="#" class="prev-'+counter+'">Previous</a></li><li><a href="#" class="next-'+counter+'">Next</a></li></ul><div style="clear:both;"></a>');
        $(this).after('<ul class="gallery-nav-'+counter+'">');
        $(this).cycle({
            fx: 'scrollHorz',
            speed:  '400', 
            timeout: '4000', 
            pager:  '.gallery-nav-'+counter,
            next: '.next-'+counter,
            prev: '.prev-'+counter,
            pause:   1,
            pauseOnPagerHover: true, 
            startingSlide: 0, // zero-based 

            pagerAnchorBuilder: function(id, slide) { 
                var s = $(slide);
                var imgsource = s.find('img.CycIMG').attr('src');

                // Set this as the source for our image
                return '<li><a href="#"><img src="' + imgsource + '" width="62" alt=""></a></li>';  
            }
        }).cycle('pause');
        $(this).touchwipe({
            wipeLeft: function() {
                $('.pics').cycle('next');       
            },
            wipeRight: function() {
                $(this).cycle('prev');
            }
        });
        counter++;
    });
}

$（this）.touchwipeで始まるコード行は、私が動作させることができないものです。ここでは、2つの異なる例を示しています。「wipeLeft」関数は機能しますが、ジェネリッククラス（「pics」）を対象としているため、すべてのカルーセルを一度にスワイプします。「wipeRight」関数は、「this」を使用して、ループ内の現在のサイクルのカルーセルだけをターゲットにする方法です。最初に作成したカルーセルごとに個別のIDをターゲットにしようとしましたが、うまくいかないようです。

本当に助けていただければ幸いです！

4

1 に答える 1

3

コードにコンテキストセレクターを追加してみてください。

$('.gallery .pics').each(function() {
    var parent = this.parentNode;

    /*...*/

    $(this).touchWipe({
        wipeLeft: function(){
            $('.pics', parent).cycle('next');
        }
    });
});

これは、セレクターに「コンテキスト」を追加することです。これに似ています：$(parent).find('.pics')

私は実際にあなたとまったく同じ状況に取り組んでいます、そして私はそれが機能することをテストしました:)

于 2012-07-16T22:19:30.190 に答える