Bootstrap 3 Slider

Slider

by hamix

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