JQuery карусельного следующий элемента не скользящий в

Question

Смотрите эту скрипку: http://jsfiddle.net/r0mvyLmx/

Я должен написать простой JQuery горизонтальной карусель с нуля, но я наткнулся на следующий вопрос: при следующем нажатии кнопки текущего элемента слайды из вида просто прекрасные, но следующий элемент не скользит. Он появляется только после того, как предыдущий элемент полностью вышел из поля зрения. Если вы меня не поняли, это тот эффект, который я получил после: http://jsfiddle.net/yvD5S/ (следующий и предыдущие слайды скользя в то же время).

Вот мой код:

$('#carousel-outer button:last').on('click', function() { 
     var slide = $('#carousel-inner .item.active'); 

     slide.animate({'margin-left':'-480px'},2000,function() { 
      slide.css({ 'margin-left': 0 }); 
      slide.parent().find('div:last').after(slide); 
      slide.removeClass('active'); 
      slide.parent().find('div:first').addClass('active'); 
     }); 
    }); 

Answer 1

Упс, вопрос оказался довольно простым. Это не был jQuery, а на самом деле CSS, который неисправен. На внутренней обертке карусели я дал ей ту же ширину внешней обертки, и слайды не отображались внутри, а скорее блокировались, поэтому они не могли течь друг за другом. Я обновил скрипку для всех, кто интересуется проблемой: http://jsfiddle.net/r0mvyLmx/1/. Также было небольшое изменение в JS, чтобы сохранить неактивные элементы с отображением: none.

CSS:

#carousel-outer { 
    width: 480px; 
    margin: 0 auto; 
    overflow: hidden;  
} 

#carousel-inner { 
    width: 1600px; 
    height: 200px; 
    overflow: hidden; 
} 

JQuery изменения:

$('#carousel-outer button:last').on('click', function() { 
    var slide = $('#carousel-inner .item.active'); 

    slide.next().addClass('active'); 
    slide.animate({'margin-left':'-480px'},2000,function() { 
     slide.css({ 'margin-left': 0 }); 
     slide.parent().find('div:last').after(slide); 
     slide.removeClass('active'); 
});