JQuery Вертикальная карусель бесконечная прокрутка

Question

У меня небольшая проблема с вертикальной карусельной прокруткой. Я использую JQuery, HTML и CSS для этого проекта. Идея состоит в том, чтобы заставить ее прокручивать бесконечно в вертикальном движении, она отлично работает, однако при первом переходе она переезжает от последнего ребенка ко второму, а не переходит от последнего к первому, он работает правильно после первого перехода.

Вот код и скрипку в конце:

HTML-:

<div id='carousel_container'> 
<div id='carousel_inner'> 
    <ul id='carousel_ul'> 
    <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_1.png' /></a></li> 
    <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_2.png' /></a></li> 
    <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_3.png' /></a></li> 
    <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_4.png' /></a></li> 
    <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_5.png' /></a></li> 
    <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_6.png' /></a></li> 
    <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_7.png' /></a></li> 
    </ul> 
</div> 
</div> 

CSS-:

#carousel_container { 
    position: absolute; 
    bottom:26px; 
    right:0; 
} 
#carousel_inner { 
    width:210px; 
    height:120px; 
    overflow: hidden; 
    background: rgba(0, 0, 0, .8); 
} 
#carousel_ul { 
    position: relative; 
    top: 0px; 
    list-style-type: none; 
    margin: 0px; 
    padding: 0 0 10px 0; 
    height:1000px; 
    width:210px; 
} 
#carousel_ul li { 
    width: 200px; 
    padding: 0px; 
    height: 110px; 
    margin: 10px 5px; 
} 
#carousel_ul li img { 
    cursor: pointer; 
    cursor: hand; 
    border: 0px; 
    margin-bottom: -4px; 
} 

JQuery/JS:

var car_ul = $('#carousel_ul'); 
car_ul.find('li').first().before(car_ul.find('li').last()); 

function scroll_down() { 
    $('#carousel_ul:not(:animated)').animate({ 
     'top': parseInt(car_ul.css('top')) - car_ul.find('li').outerHeight() - 10 
    }, 500, function() { 
     var cars = car_ul.find('li'); 
     car_ul.css({ 
      'top': '-120px' 
     }); 
     cars.last().after(cars.first()); 
    }); 
} 

var interval_id = setInterval(function() { 
    scroll_down(); 
}, 5000); 

И, наконец, link to the fiddle

Answer 1

Я исправил редактированием JavaScript/JQuery это:

var car_ul = $('#carousel_ul'); 
function scroll_down(){ 
$('#carousel_ul:not(:animated)').animate({'top' : parseInt(car_ul.css('top')) - car_ul.find('li').outerHeight() - 10},500,function(){ 
    var cars = car_ul.find('li'); 
    cars.last().before(cars.first()); 
    car_ul.css({'top' : '0px'}); 
}); 
} 
var interval_id = setInterval(function(){scroll_down();},5000); 

Спасибо в любом случае :)

Answer 2

car_ul.css({ 
     'top': '+=120px' 
    }); 

Answer 3

Просто измените эту строку на свой код, как он отсутствовал параметр Radix

'top': parseInt((car_ul.css('top')) - car_ul.find('li').outerHeight() - 10,10)