どのように無限カルーセルJQueryを作成できますか？

Question

私はJQueryを使用して無限のカルーセルを作ろうとしていますが、問題は白い画面に行く最終画像に行くときです。このための修正は前の画像に戻ります。これはそれぞれの画像お互いの下にありますが、どうすればループを作って、次にクリックすると最初のイメージに行くことができますか、あるいは少なくとも前のイメージに戻ることができますか？

var sliderList; 
 
$(function() { 
 

 
    var sliderWrapper = $("#slider"); 
 
    sliderList = sliderWrapper.children("ul"); 
 
    var sliderItems = sliderList.children("li"); 
 

 
    function animateSlider(direction, duration) { 
 
    if (direction === "+") { 
 
     sliderList.animate({ 
 
     "margin-left": "+=800px" 
 
     }, duration); 
 
    } else if (direction === "-") { 
 
     sliderList.animate({ 
 
     "margin-left": "-=800px" 
 
     }, duration); 
 
    } 
 
    } 
 

 
    $(".button").on('click', function() { 
 
    if ($(this).hasClass("back")) { 
 
     animateSlider("+", 1000); 
 
    } else { 
 
     animateSlider("-", 1000); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="slider"> 
 
    <ul> 
 
    <li><img src="img/room1.jpg" alt="hotel room" /></li> 
 
    <li><img src="img/room2.jpg" alt="hotel room" /></li> 
 
    <li><img src="img/room3.jpg" alt="hotel room" /></li> 
 
    <li><img src="img/room4.jpg" alt="hotel room" /></li> 
 
    </ul>

Answer 1

sliderItemがリストの最後の項目であるならば、+に応じてアニメーション化するために0または終了を行うかどうかをチェックしません - 何かを

$(function() { 

    var sliderWrapper = $("#slider"); 
    sliderList = sliderWrapper.children("ul"); 
    var sliderItems = sliderList.children("li"); 
    var count = 0; 

    function animateSlider(direction, duration) { 
    if (direction === "+") { 
     if(sliderItems.length === count){ 
     sliderList.animate({ 
     "margin-left": "-=2400px"//go back to original 
     }, duration); 
     }else{ 
      sliderList.animate({ 
      "margin-left": "+=800px" 
      }, duration); 
     } 
     count++; 
    } 

そうですね。それでは逆をしてください。