jQueryスライダonclickイベントループ写真

Question

jQueryを使用してonclickイベントに基づいて非常に簡単なスライドショーを作成しています。ユーザーが次のボタンをクリックすると、スライダは余白を残します： - = 400px。スライダーは素晴らしいですが、最後のスライダーに移動してユーザーがもう一度ボタンをクリックすると、何も表示されません。ちょうど - = 400pxになります。私がしたいのは、ユーザーが最後のimgにいるときにクリックすると、最初のイメージを表示し、次に2番目のイメージを表示することです。私は誰かがボタンをクリックしているときに無限ループをしたいと思います。うまくいけば、誰かがこの問題を助けることができます。

ありがとうございました。

HTMLコード：

<div class="slideClick"> 
     <ul class="sliderClick"> 
      <li class="slidesClick"><img src ="imgs/model_01.jpg"></li> 
      <li class="slidesClick"><img src ="imgs/model_02.jpg"></li> 
      <li class="slidesClick"><img src ="imgs/model_03.jpeg"></li> 
      <li class="slidesClick"><img src ="imgs/model_04.jpg"></li> 
      <li class="slidesClick"><img src ="imgs/model_01.jpg"></li> 
     </ul> 
</div> 
    <button class="clickPrev">Prev</button> 
    <button class="clickNext">Next</button> 

CSSコード：

.slideClick { 
    clear: both; 
    width:400px; 
    height:400px; 
    border: 1px solid black; 
    overflow: hidden; 
    margin-top: 100px; 
} 

.slideClick .sliderClick{ 
    width:2000px; 
    height:400px; 
} 

.slideClick .sliderClick .slidesClick { 
    list-style: none; 
} 

.slideClick .sliderClick .slidesClick img{ 
    width:400px; 
    height:400px; 
    float:left; 
} 

のjQueryコード：

var currentClickSlider = 1; 

$(".clickNext").on("click", function(){ 
    $(".sliderClick").animate({marginLeft: "-=400px"}, 500, function(){ 

     currentClickSlider++; 
     if (currentClickSlider === $(".slidesClick").length){ 

      currentClickSlider = 1; 
      $(".sliderCLick").css("margin-left", 0); 
     } 

    }); 
}); 

Answer 1

if (currentClickSlider === $(".slidesClick").length + 1) { 

あなたが何をしたいかは、要素が最後であるかどうかを確認で素子。カウンタは1から始まります。したがって、N + 1個の要素の後にスライダを繰り返します。