Infinite looping slider

by ponyspy

HTML

<div id="container">
    <ul id="slider">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>
</div>

CSS

#container {
    position: relative;
    width: 200px;
    height:100px;
    background: orange;
}
#slider {
    position: absolute;
}

JavaScript

$(function () {
    var startTime = +new Date();
    $('#container').css('overflow', 'hidden');
    
    var slider = $('#slider'),
        items = slider.find('li');
    var sliderHeight = slider.height(),
        itemsNum = items.length,
        itemHeight = items.height();

    slider.css('top', '-' + (sliderHeight + itemHeight) + 'px');

    var startPos = slider.css('top');

    items.first().before(items.clone());
    items.last().after(items.clone());

    scrollItems(slider,sliderHeight,itemHeight,startPos,4);
    var endTime = +new Date();
    var diff = endTime - startTime;
    console.log(diff);
    setInterval(function(){ 
        scrollItems(slider,sliderHeight,itemHeight,startPos,4);
    }, 4000);
});

function scrollItems(container, targetsHeight, increment, startPos, temps) {
    var secs = temps * 1000;
    container.animate({
        'top': '-' + ((targetsHeight * 2) + increment) + 'px'
    }, secs, 'linear', function () {
        container.css('top', startPos);
    });
}