Smooth circular animation in html list

I have html list , want to animate it left to right , but when it reach at the last point , it should rotate to its first position. Want only to show 3 elements is mandatory.

Current behavior : It is not circular.

I have tried this

var $elements = $("#itemsListBox ul li");
var count = $elements.length;

$('.pp_arrow_previous').bind('click',function(){

    total=(Math.floor(count/6))*480;
    var e=$('#slider').css("left");
    e=parseInt(e);
    e=Math.abs(e);

    if(e==0)

    {
        $('#slider').css({ position: 'absolute' });
        $('#slider').css({ left: -(total)+'px' });
    }
    else
        $('#slider').animate({left: "+=480"}, "fast");

    //alert("Slider left is : "+e);

});

$('.pp_arrow_next').bind('click',function(){

    var e=$('#slider').css("left");

    total=(Math.floor(count/6))*480;
    e=parseInt(e);
    e=Math.abs(e);
    if(total<=e)
    {
        $('#slider').css({ position: 'absolute' });
        $('#slider').css({ left: '0px' });

    }
    else
        $('#slider').animate({left: "-=480"}, "fast");

});

Here is my fiddle http://jsfiddle.net/AtweK/2/