ピクセルを制限してバックフォワードdivアニメーションを停止しますか？

Question

私はjQueryを初めて使っていて、abosoluteポジションのdivを使用して一種のスライダーを作成することになっていました。

galleryのdivを4枚作成しました。 gallery（絶対位置）は、ピクチャと同じサイズの別のdiv（相対位置）内にあります。そして、私は2つのボタン "戻る"と "前方"を持っています。

これは、これまで私が持っているコードです：

$("document").ready(function() { 
    $("#back").click(function() { 
     $("#gallery").animate({"left": "+=104px"}, "slow"); 
    }); 

    $("#forward").click(function() { 
     $("#gallery").animate({"left": "-=104px"}, "slow"); 
    }); 
}); 

それは非常に単純だが、それだけで正常に動作します。

したがって、「戻る」または「進む」のいずれかをクリックするたびに、galleryは、左の位置にあるピクセルの正確な量を増減して移動します。gallery。

問題はそれがそのまま続いていて、最後の写真または最初のいずれかに到達するとアニメーションが停止するように実装したいということです。

「これを増減すると（例えば、4枚の写真があるので416px）アニメーションを停止する」というような文言があるはずです（if）。

私は多くのオプションを試していましたが、1週間ずっと検索していましたが、構文や何か問題があると思います。コミュニティがこれを正しく実装するのに役立つことができますか？

Answer 1

現在のスライドを追跡する変数を追加します。

$("document").ready(function(){ 
    var counter = 1; 

    $("#back").click(function() { 
     if(counter > 1) { 
      $("#gallery").animate({"left": "+=104px"}, "slow"); 
      counter--; 
     } 
    }); 
    $("#forward").click(function(){ 
     if(counter < 4) { 
      $("#gallery").animate({"left": "-=104px"}, "slow"); 
      counter++; 
     } 
    }); 
}); 

Answer 2

あなたは#galleryのleftを取得、または#gallery で変数countを格納できるCSSプロパティを読み込む方法はcss()