How to Clone Existing Items Into Circular Slider On Beginning and End

Question

Can you please take a look at This Demo let me know how I can clone items into the ul to make a Circular Slider list. as you can see I have this list as following code but I need to clone first item (left slide) or last item (right slide) at beginning and end of the list.

var item = $(".thumbnail").width();
var paddT = $(".thumbnail").css('margin-left');
item = item + 20;
$(".leftslide").on("click", function () {
    $(".list-inline").animate({
        left: '-=' + item + 'px'
    }, 300);
});
$(".rightslide").on("click", function () {
    $(".list-inline").animate({
        left: '+=' + item + 'px'
    }, 300);
}); 

Thanks

Answer 1

First/last li is cloned and prepends/appends to .list-inline when necessary after .list-inline animation:

Fiddle.

var item = $(".thumbnail").width();
var paddT = $(".thumbnail").css('margin-left');
item = item + 20;

var list = $(".list-inline");

$(".leftslide").on("click", function()
{
    list.animate
    (
        {
            left: '-=' + item + 'px'
        },
        300, 
        function()
        {
            if (parseInt(list.css("left")) >= -$(".list-inline li").length * item)
            {
                list.find("li:last").clone().appendTo(list);
            }
        }
    );
});

$(".rightslide").on("click", function()
{
    $(".list-inline").animate
    (
        {
            left: '+=' + item + 'px'
        },
        300,
        function()
        {
            if (parseInt(list.css("left")) >= item)
            {
                list.find("li:first").clone().prependTo(list);
                list.css("left", '-=' + item + 'px');
            }
        }
    );
});