Loop 2 на 2 Divs диапазона

Question

Я пытаюсь зацикливать это jsFiddle, но когда я получу последний div (в этом случае номер 6), отображается только div-номер 1 и разрывы цикла.

То же самое происходит, когда я пытаюсь вернуться из div 1: При приближении к номеру 1 отображается номер 6 и разрывы цикла. Кто-нибудь это исправит?

Это мой код:

HTML:

<div id="right_curriculum_container"> 
<img src="img/1_c_left_arrow.png" id="left_arrow" width="26" height="26" alt="Previous" title="Previous"> 
<div id="new_container"> 
<div id="image_container"> 

<div class="center_image">1</div> 
<div class="center_image">2</div> 

<div class="center_image">3</div> 
<div class="center_image">4</div> 

<div class="center_image">5</div> 
<div class="center_image">6</div> 



</div> 
</div> 
<img src="img/1_c_right_arrow.png" id="right_arrow" width="26" height="26" alt="Next" title="Next"></div> 

CSS:

.left_arroq { 
    width: 40px; 
    height: 40px; 
    float: left; 
    padding-top: 110px; 
    padding-bottom: 100px; 
} 
#right_arrow { 
    text-align: center; 
    display: block; 
    margin-left: 13px; 
    cursor: pointer; 
    position:absolute; 
    z-index:99; 
    top:112px; 
    left:388px; 
} 
#left_arrow { 
    text-align: center; 
    display: block; 
    margin-left: 13px; 
    cursor: pointer; 
    position:absolute; 
    z-index:99; 
    top:112px; 
} 
/* Added New_Container */ 
#new_container { 
width: 350px; 
overflow:hidden; 
position: relative; 
margin-left:36px; 
} 
#image_container { 
    height: 250px; 
    width: 900px; 
    margin-right: auto; 
    margin-left: auto; 
    float: left; 
    overflow:hidden; 
    display: block; 
    position: relative; 
} 
.center_image { 
    height: 235px; 
    width: 163px; 
    background-color: #606060; 
    float: left; 
    margin-left: 8px; 
    border: 2px solid #7ACBBF; 
    margin-top: 6px; 
    position: relative; 
} 

JS:

$(document).ready(function() { 


    var $imgWidth = $('.center_image').first().outerWidth(); 
    var $imgCount = $('.center_image').length; 
    $('#image_container').width($imgWidth*($imgCount+30)); 
    $('.center_image').first().addClass('the_first'); 
    $('.center_image').last().addClass('the_last'); 
    $('.the_first').clone().appendTo('#image_container'); 


    $('.the_last').clone().prependTo('#image_container'); 
    $('.center_image').css({'left':-1*$imgWidth-9+'px'}); 


    $('#left_arrow').click(function() { 
$('.center_image').stop(true,true); 
     var $newLeft = $('.center_image').position().left+(2*($imgWidth)+16); 
     $('.center_image').animate({'left':$newLeft+'px'},function(){ 
     if (Math.abs($newLeft) == (($imgCount+1)*$imgWidth)) 
      { 
      $('.center_image').css({'left':-1*$imgWidth -9+'px'}); 
      } 
     }); 
     return false; 
    }); 

    $('#right_arrow').click(function() { 
$('.center_image').stop(true,true); 
     var $newLeft = $('.center_image').position().left-(2*($imgWidth)+16); 
     $('.center_image').animate({'left':$newLeft+'px'},function(){ 
     if (Math.abs($newLeft) == (0)) 
      { 
      $('.center_image').css({'left':-($imgCount)*$imgWidth-9+'px'}); 
      } 
    }); 
    return false; 
    }); 

}); 

Answer 1

Поскольку код, который вы используете, был создан, чтобы отображать только одно изображение в окне просмотра, простым решением было бы создать новый div, который включает в себя блокировки (2x2) div center_image, вместо двух перемещается только 2 div.