어떻게 무한 회전식 슬라이드 쇼 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++; 
    } 

뭔가를 그런 식으로. 그럼 그냥 반대를 다시