Bootstrap 3 Slider

Slider

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
    <div class="btn-group">
        <button class="btn btn-default leftslide">
            <</button>
                <button class="btn btn-default rightslide">></button>
    </div>
    <div class="well">
        <ul class="list-inline">
            <li class="">
                <div class="thumbnail">
                    <img data-src="holder.js/400x400" alt="..." />
                    <div class="caption">
                         <h3>Thumbnail label1</h3>

                        <p>...</p>
                        <p><a href="#" class="btn btn-default" role="button">Button</a>
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <div class="thumbnail">
                    <img data-src="holder.js/300x300" alt="..." />
                    <div class="caption">
                         <h3>Thumbnail label2</h3>

                        <p>...</p>
                        <p><a href="#" class="btn btn-default" role="button">Button</a>
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <div class="thumbnail">
                    <img data-src="holder.js/300x300" alt="..." />
                    <div class="caption">
                         <h3>Thumbnail label3</h3>

                        <p>...</p>
                        <p><a href="#" class="btn btn-default" role="button">Button</a>
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <div class="thumbnail">
                    <img data-src="holder.js/300x300" alt="..." />
                    <div class="caption">
                         <h3>Thumbnail label4</h3>

                        <p>...</p>
                        <p><a href="#" class="btn...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
    padding-top:25px;
}
.well {
    overflow:hidden;
}
ul {
    width:22222px;
    position:relative
}
li + li {
    margin-left:.06%
}
.btn-group {
    margin-bottom:5px;
}
li {
    width:1.6%;
}

JavaScript

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