Как клонировать существующие элементы в круговой слайдер в начале и в конце

Question

Можете ли вы взглянуть на это демо, дайте мне знать, как я могу клонировать предметы в ul, чтобы составить круговой слайдер. как вы видите, у меня есть этот список в виде следующего кода, но мне нужно клонировать первый элемент (левый слайд) или последний элемент (правый слайд) в начале и конце списка.

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);
}); 

Спасибо

Answer 1

Первый Последний li клонируется и добавляет / добавляет в .list-inline когда необходимо после .list-inline анимация:

Скрипка

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');
            }
        }
    );
});

Answer 2

JQuery

var count=$(".thumbnail").length;
var item = $(".thumbnail").width();
var paddT = $(".thumbnail").css('margin-left');
item = item + 20;
$(".leftslide").on("click", function () {
    $(".list-inline").animate({
        left: '-=' + item + 'px'
    }, 300,function(){
        var lastTmb=$(".thumbnail:last");        
        if(lastTmb.offset().left<0)
        {
            //for (i = 0; i <= count; i++) {
                 //$(".thumbnail:first").parent().insertAfter(lastTmb.parent());
            //}
            $(".list-inline").animate({
               left: '+=' + item*count + 'px'
            }, 300);
        }
    });
});
$(".rightslide").on("click", function () {
    $(".list-inline").animate({
        left: '+=' + item + 'px'
    }, 300,function(){
        var firstTmb=$(".thumbnail:first");        
        if(firstTmb.offset().left>0)
        {
            //for (i = 0; i <= count; i++) {
                 //$(".thumbnail:last").parent().insertAfter(firstTmb.parent());
            //}
            $(".list-inline").animate({
               left: '-=' + item*count + 'px'
            }, 300);
        }
    });
});

DEMO