0

tympanus によるJQUERY を使用した循環型コンテンツ カルーセルに関する質問

これをWebプロジェクトに実装していますが、これまでのところ完全に機能しますが、ループを停止する必要があります/左右に複製し、最後の子または最初の子に到達するまでスクロールを停止します。基本的には、無限循環/ループ効果を取り除くことです。

ここはトリックを行うために変更する部分だと思いますが、ロジックが理解できないのは残念です。

助けてください！

下手な英語でごめんなさい、私はマレーシア出身です




// 右/左の要素を複製し、dir と scroll に従ってそれらを追加/先頭に追加します
                if( dir === 1 ) {
                    $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
                        $(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
                    });
                }
                そうしないと {
                    var $first = $wrapper.children().eq(0);


                $wrapper.find('div.ca-item:gt(' + ( cache.totalItems  - 1 - scroll ) + ')').each(function(i) {
                    // insert before $first so they stay in the right order
                    $(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
                });
            }

            // animate the left of each item
            // the calculations are dependent on dir and on the cache.expanded value
            $wrapper.find('div.ca-item').each(function(i) {
                var $item   = $(this);
                $item.stop().animate({
                    left    :  ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px'
                }, opts.sliderSpeed, opts.sliderEasing, function() {
                    if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) {
                        // remove the item that was cloned
                        $item.remove();
                    }                       
                    cache.isAnimating   = false;
                });
            });
4

2 に答える 2

2

プラグインは読みにくいものではなかったので、ご要望の機能を備えたカスタム バージョンを作成しました。おもう。私がこの記事を読んだら、あなたはそれが無限であることを望まないことを除いて、そのすべての機能を望んでいます. そこで、このカスタム バージョンにオプションを追加して、まさにそのような機能を提供しました。無限ループをオフにするには、次のように false に設定するだけです。

$('#ca-container').contentcarousel({ infinite: false });

これにより、カルーセルが最初と最後のフレームで停止します。

ここで動作デモを参照してください

自分で調整したくない場合は、デモからコードをコピーして JS ファイルに貼り付けます。古いコードをこの更新プログラムに置き換えます。それ以外の場合、自分で行うことにした場合、調整は難しくありませんでした.

  1. 「init」メソッド内にオプションを追加しただけです。このメソッドは 139 行目から始まります。149 行目にオプションを追加しました。

    methods = {
    init        : function( options ) {

        if( this.length ) {

            var settings = {
                sliderSpeed     : 500,          // speed for the sliding animation
                sliderEasing    : 'easeOutExpo',// easing for the sliding animation
                itemSpeed       : 500,          // speed for the item animation (open / close)
                itemEasing      : 'easeOutExpo',// easing for the item animation (open / close)
                scroll          : 1,            // number of items to scroll at a time
/*ADDED OPTION! */  infinite: true  //  tells carousel wether or not to clone items and/or continue scroll past first and last
            };

  2. このオプションを追加すると、4 行目の「navigate」メソッドに戻ります。最初の if ステートメントを過ぎたところ (これにより、すべてのオプションが正しくチェックインされます。いくつかのオプションが必要になります) に、さらに 2 つの if ステートメントを追加しました。これは、すべてが true の場合に単純に「返され」、アニメーション変数を false にリセットします (これは保存されます)。キャッシュ変数内)。これらの if ステートメントは、最初と最後の要素の方向と位置をチェックします。

    • 最初の if ステートメントは非常に簡単です。dir = の場合-1、ユーザーが「前へ」をクリックしたことがわかります。position().left次に、最初の項目の をチェックし、 = to0の場合は続行する必要はありません。

      if (dir == -1 && !opts.infinite && $wrapper.find('div.ca-item').first().position().left == 0) { 
    cache.isAnimating = false; 
    return; 
}

    • 2 つ目はもう少しトリッキーです。左が予想されるアニメーションとまったく同じであることを知る必要があります。そこで、 の 36 行目にある計算を借りました$wrapper.find('div.ca-item').each。

      if (dir == 1 && !opts.infinite && $wrapper.find('div.ca-item').last().position().left == (cache.itemW * factor * scroll)) {  
    cache.isAnimating = false;  
    return;  
}

  3. ほぼ最後に、もう 1 つ簡単な修正を行います。最初は 17 行目 (この時点まで私の指示に従った場合、数行下になります) で始まる if ステートメントを見つける必要がありますif( dir === 1 ) {。これはまだ "navigate" メソッド内にあります。ここで、「無限」オプションが false の場合に if ステートメントが実行されないようにするためのチェックを追加する必要があります。なんで？これはアイテムを「移動」させる「邪悪なクローニング」が行われるためですが、古いアイテムが削除される場所ではありません。まだあと 1 ステップあります。とりあえず、古い if ステートメントを次のようにラップするだけです。

    if (opts.infinite) {
    if( dir === 1 ) {
        $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
            $(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
        });
    }
    else {
        var $first  = $wrapper.children().eq(0);

        $wrapper.find('div.ca-item:gt(' + ( cache.totalItems  - 1 - scroll ) + ')').each(function(i) {
            // insert before $first so they stay in the right order
            $(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
        });
    }
}

  4. 最後に！ウット！最後のステップは、その悪の削除の if チェックです。最初は 40 行目で、 $item.remove();'$wrapper.find('div.ca-item').each(function(i) {' 内にまだ "navigate" メソッド内にあります。この 1 つのライナーを次のように変更するだけです。

    if (opts.infinite) $item.remove();

ビオラ！すべて完了！見る？まったく難しくありません！お役に立てれば！

「すべてのことは簡単です...あなたがそれらについて考えなければ!」

于 2013-05-16T13:57:04.233 に答える
0

私はそれのための少し簡単な解決策を持っています...

jquery.contentcarousel.js の 222 行目 (およそ) に、Prev および next クリック コードを追加しただけです。

// navigate left

var i = 4;
var itemsLength = $('div.ca-item').length;

$navPrev.bind('click.contentcarousel', function( event ) {                                                    
    if(i == 4) 
    {
        return false;
    }
    else
    {
        if( cache.isAnimating ) return false;
        cache.isAnimating   = true;
        aux.navigate( -1, $el, $wrapper, settings, cache );
        --i;
    }
});

// navigate right

$navNext.bind('click.contentcarousel', function( event ) {                                                  
    if(i == itemsLength) 
    {
        return false;
    }
    else
    {
        if( cache.isAnimating ) return false;
        cache.isAnimating   = true;
        aux.navigate( 1, $el, $wrapper, settings, cache );
        i++;
    }
});
于 2016-11-08T07:38:47.897 に答える