0

カスタマイズされたカルーセルを作成しようとしていますが、既に次の機能があります。

  1. マウスまたはモバイル/タブレットではスワイプで左右に移動できます。
  2. ボタンで左右に移動できます。

ただし、問題は、div の最後に到達するとボタンが非アクティブにならないことです。代わりに、すべてが永遠に変化し続けます。下の図を参照してください。

ここに画像の説明を入力

jsFiddle を見てみましょう: http://jsfiddle.net/vnkRw/2/

$("#left").click(function() {
    $(".wrapper").stop(true, true).animate({left: "-=125px"}, 500);
});
$("#right").click(function() {
    $(".wrapper").stop(true, true).animate({left: "+=125px"}, 500);
});

最後に到達したら、どうすればボタンを非アクティブにできますか? たとえば、次の場合:

ここに画像の説明を入力

表示する div がなくなったので、左ボタンは非アクティブになります。

もちろん、右も同様です。

ここに画像の説明を入力

目標: 終了時にボタンを非アクティブにします。

4

2 に答える 2

2

何かのようなもの

   pos=slides=$(".wrapper > div").length;

   $("#left").click(function() {
    if(pos>3){$(".wrapper").stop(true, true).animate({left: "-=125px"}, 500);pos--;}
   });

   $("#right").click(function() {
    if(pos<slides){$(".wrapper").stop(true, true).animate({left: "+=125px"}, 500);pos++;}
   });

   $('.carousel').kinetic();
于 2013-04-19T18:39:51.733 に答える
1

カルーセルを行う際に考慮すべき点がいくつかあります。

  1. すべてのアイテムの幅は同じですか
  2. すべてのアイテムの余白は同じですか
  3. 上記のものは可変ですか

上記のすべてが静的であると仮定すると、 の左位置が である場合、右へのスクロールは起こらないという考え方wrapperです0。そして、それは簡単な部分です。他の方向では、すべてのアイテムの数を取得する必要があり、表示されているアイテムの数 (この場合は 3) を減算し、それを幅 (マージンを含む) で乗算します。これにより、すべてのアイテムが同じ幅で同じマージンを持つことができます。 ..そして最後に、あなたwrapperのleft位置が負の数になるため、-1 を掛ける必要があります。最終的に、wrapperその位置に到達した場合は、スクロールしないでください。
上記のテキストのミニウォールの視覚化:

http://jsfiddle.net/vnkRw/4/

于 2013-04-19T18:39:53.827 に答える