Wie kann ich ein unendliches Karussell JQuery machen?

Question

Ich versuche, ein unendliches Karussell mit JQuery zu machen, das Problem ist, wenn ich auf das endgültige Bild gehe es geht nur auf einen weißen Bildschirm, die Lösung für diesen geht zurück zum vorherigen Bild, ich weiß, weil jedes Bild ist ist unterein ander, aber wie kann ich es Schleife machen, so dass es zum ersten Bild geht, sobald ich nächstes klicke, oder zumindest zum vorherigen Bild zurückgehe?

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

einen Scheck tun, um zu sehen, ob die sliderItem das letzte Element der Liste ist dann das belebten 0 oder das Ende auf + oder abhängig machen -

$(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++; 
    } 

etwas so wie das. Dann machen Sie einfach das Gegenteil für zurück