0

デスクトップ ビューとタブレット ビューの両方に対応するレスポンシブ デザインを構築しています。このデザインでは、 jQuery Cycle2を使用して 1 つ以上のスライドショー ビルドを使用しています。このスライドショーには、デスクトップ 3 つのオブジェクトがスライダーに含まれており、タブレット バージョンでは 2 つだけ含まれています。

私のアプローチ:ウィンドウのサイズ変更イベントをチェックし、すべてのサイクル キャプションをアンラップし、指定された数の要素を新しいキャプションでラップし、サイクル プラグインを再起動します。

私の問題:サイクル プラグインを再起動しようとするまで、すべて正常に動作します。失敗とかしないとうまくいきません。したがって、再起動だけが問題のようです。

私のコード:

//function to fire the resize event when its done
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function() {
    delay(function(){
        if( window.innerWidth <= 979 ){
            resizeWrapper( 2 );
        }
    }, 500);
});

//function for delete wrappers and wrap new ones based on a given number
function resizeWrapper( numberOfItems ){
    $( '.productsItem' ).unwrap();

    var $set_latestProductsCycle = $( '#latestProductsCycle' ).children();
    for( var i=0, len = $set_latestProductsCycle.length; i < len; i+=numberOfItems ){
        $set_latestProductsCycle.slice( i, i+numberOfItems ).wrapAll( '<div class="popularProductsWrapper"/>' );
    }
    $( '#latestProductsCycle' ).cycle({
        fx: 'scrollHorz',
        prev: '#latestProductsButtonLeft',
        next: '#latestProductsButtonRight',
        timeout: 0,
        caption: '.popularProductsWrapper'
    });
}

手伝ってくれてありがとう。

4

1 に答える 1

3

自分で質問に答えるには：

最初にサイクル スクリプトを呼び出したときに作成されるセンチネル コンテナーを削除するのを忘れていました。さらに、サイクル コンテナーを再起動するときに、「キャプション」を定義する必要はありません。

要するに、関数は次のようになります。

    function resizeWrapper( cycleContainer, numberOfItems ){
    $( cycleContainer ).cycle( 'destroy' );
    $( cycleContainer + ' .cycle-sentinel' ).remove();

    $( cycleContainer + ' .slider .item' ).unwrap();

    var $set_latestProductsCycle = $( cycleContainer ).children();

    for( var i=0, len = $set_latestProductsCycle.length; i < len; i+=numberOfItems ){
        $set_latestProductsCycle.slice( i, i+numberOfItems ).wrapAll( '<div class="slider"/>' );
    }

    $( cycleContainer ).cycle({
        fx: 'scrollHorz',
        prev: cycleContainer + 'Prev',
        next: cycleContainer + 'Next',
        timeout: 0
    });
}

みなさん、お気遣いありがとうございます。

于 2013-02-06T15:48:04.317 に答える