Цикл 2 на 2 деления диапазона

Я пытаюсь зациклить этот 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;
     });

});