jQuery 슬라이더, 마지막으로 도달했을 때 처음으로 돌아가는 방법

Question

안녕하세요 jQuery를 사용하여 슬라이더를 만들었습니다. 왼쪽 및 오른쪽으로 이동할 수있는 기능이 있지만 정상적으로 끝나면 아무런 변화가 없습니다. 시작을 다시 찾은 후 시작에서 prev를 누르면 마지막 항목으로 이동하지 않습니다.

저는 특히 jQuery에별로 좋지 않아 다음에해야 할 일을 알지 못합니다. 누군가가 친절하게 올바른 방향으로 나를 가리키고 간단한 설명을 줄 수 있다면 감사 할 것입니다.

내 코드는 아래 또는 내 jsFiddle보기 미리

감사 :

index.html을

 <div class="bottom"> 
        <div class="rotatorarrows"> 
       <input type="hidden" id="currentShownDiva" value="1"/> 
      <ul> 
      <li><a class="parrows" id="parrowleft">Prev</a></li> 
      <li><a class="parrows" id="parrowright">Next</a></li> 
      </ul> 
      </div> 
     <div class="timeline_rotator"> 
     <!-- FIRST STORY --> 
      <div class="contentrotator"> 
      <span class="news_element"><h2 class="timeline_year">2003</h2></span> 
      <span class="news_element"><h3 class="timeline_heading">Apple Launches iPhone</h3> 
      <p class="timeline_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></span> 
      </div> 
         <!-- FIRST STORY --> 
      <div class="contentrotator"> 
      <span class="news_element"><h2 class="timeline_year">2004</h2></span> 
      <span class="news_element"><h3 class="timeline_heading">Apple Launches iPhone</h3> 
      <p class="timeline_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></span> 
      </div> 
         <!-- FIRST STORY --> 
      <div class="contentrotator"> 
      <span class="news_element"><h2 class="timeline_year">2005</h2></span> 
      <span class="news_element"><h3 class="timeline_heading">Apple Launches iPhone 2005</h3> 
      <p class="timeline_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></span> 
      </div> 


     </div> <!-- End rotator--> 
     </div> <!-- end bottom --> 

JS/js.js

// 자바 스크립트 문서

$(document).ready(function(){ 

$('.contentrotator').hide(); 
    $('.contentrotator:first').show(); 
    $('#parrowleft').off('click').on('click', function() { 
     var currentView = parseInt($('#currentShownDiva').val(), 10) - 1; 
     if (currentView < 1) return; 
     $('.contentrotator').hide(); 
      $('.contentrotator:eq(' + (currentView - 1) + ')').show(); 
      $('#currentShownDiva').val(currentView); 
    }); 

    $('#parrowright').off('click').on('click', function() { 
     var currentView = parseInt($('#currentShownDiva').val(), 10) + 1; 
     if (currentView > $('.contentrotator').length) return; 
     $('.contentrotator').hide(); 
     $('.contentrotator:eq(' + (currentView -1) + ')').show(); 
     $('#currentShownDiva').val(currentView); 

    }); 

}) 

Answer 1

새 색인 값이 콘텐츠 길이보다 큰지 확인하고, 그렇다면 첫 번째보기로 설정하십시오. 마찬가지로 새 색인이 1보다 작은 경우 콘텐츠의 길이로 설정하십시오.

$('.contentrotator').hide(); 
    $('.contentrotator:first').show(); 
    $('#parrowleft').off('click').on('click', function() { 
     var currentView = parseInt($('#currentShownDiva').val(), 10) - 1; 
     if (currentView < 1) { 
      currentView = $('.contentrotator').length; 
     } 
     $('.contentrotator').hide(); 
      $('.contentrotator:eq(' + (currentView - 1) + ')').show(); 
      $('#currentShownDiva').val(currentView); 
    }); 

    $('#parrowright').off('click').on('click', function() { 
     var currentView = parseInt($('#currentShownDiva').val(), 10) + 1; 
     if (currentView > $('.contentrotator').length) { 
     currentView = 1; 
     }; 
     $('.contentrotator').hide(); 
     $('.contentrotator:eq(' + (currentView -1) + ')').show(); 
     $('#currentShownDiva').val(currentView); 

    }); 

Fiddle