갤러리 이전/다음 버튼이 작동하지 않습니다.

Question

총 10 개의 이미지에 대해 5 개의 이미지가 2 행으로 구성된 이미지 갤러리가 있습니다. 나는 20 개의 이미지를 가지게되며 사용자가 다음 버튼을 누르면 갤러리가 다음 10 개의 이미지로 이동하게됩니다. 이전에는 사용자가 이전 10 개의 이미지로 이동합니다. 내 인생에서 나는 이전과 다음 버튼이 작동하지 않는 이유를 알 수 없다.

jQuery를 :

여기

var $item = $('div.folder'), //Cache your DOM selector 
     visible = 5, //Set the number of items that will be visible 
     index = 0, //Starting index 
     endIndex = ($item.length/visible) - 1; //End index 

    $('div#arrowR-spring').click(function() { 
     if (index < endIndex) { 
      index++; 
      $item.animate({ 
       'left': '-=315px' 
      }); 
     } else { 
      index = 0; 
      $item.animate({ 
       'left': '+=' + (315 * endIndex) + 'px' 
      }); 
     } 
    }); 

    $('div#arrowL-spring').click(function() { 
     if (index > 0) { 
      index--; 
      $item.animate({ 
       'left': '+=315px' 
      }); 
     } else { 
      index = endIndex; 
      $item.animate({ 
       'left': '-=' + (315 * endIndex) + 'px' 
      }); 
     } 
    }); 

내가 현재 가지고있는 것입니다 : link to my fiddle. 어떤 도움이라도 대단히 감사하겠습니다!

Answer 1

계산에 대해서는 잘 모르겠지만 애니메이션에 약간의 오류가 있습니다. 아래를 교정 해보십시오

$('#arrowR').click(function(){ 
     if(index < endIndex){ 
      index++; 
      $item.animate({'margin-left':'-=315'}); 
     } else { 
      index = 0; 
      $item.animate({'margin-left':'+='+(315*endIndex)}); 
     } 
    }); 

    $('#arrowL').click(function(){ 
     if(index > 0){ 
      index--;    
      $item.animate({'margin-left':'+=315'}); 
     } else { 
      index = endIndex; 
      $item.animate({'margin-left':'-='+(315*endIndex)}); 
     } 
    }); 

시도 데모 여기에 : 당신의 응답 PM에 대한 http://jsfiddle.net/YRTzG/23/

Answer 2

HTML 코드의 10 개 항목 만 jsfiddle이라는 것을 알 수 있습니다. 그러나 HTML에없는 나머지 10 개 항목의 색인을 변경하려고합니다. HTML 코드를 다시 한 번보고 20 개의 항목이 있는지 확인하십시오.