carousel demo

by lemon kazi

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <div class="col-xs-4">
                <blockquote class="twitter-tweet" data-cards="hidden" lang="en">
                    <p lang="en" dir="ltr">Model S can take you anywhere, come and test drive <a href="http://t.co/NTad8VVhGB">http://t.co/NTad8VVhGB</a>  <a href="http://t.co/xWlvrnDZMG">pic.twitter.com/xWlvrnDZMG</a>

                    </p>&mdash; Tesla Motors (@TeslaMotors) <a href="https://twitter.com/TeslaMotors/status/652149926000889856">October 8, 2015</a>

                </blockquote>
                <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-4">
                <div class="review">
                     <h3>Review Title here</h3>

                    <p>by reviewer</p>
                    <hr>
                    <p>Content of review here. Content of review here. Content of review here.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

CSS

#myCarousel .carousel-inner {
    max-height: 300px;
}
.review {
    border: 1px solid #eee;
    padding: 5px 10px 5px 10px;
}
.carousel-inner .active.left {
    left: -33%;
}
.carousel-inner .active.right {
    left: 33%;
}
.carousel-inner .next {
    left: 33%
}
.carousel-inner .prev {
    left: -33%
}
.carousel-control.left {
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.65) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.65) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.65) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.65) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%,...

JavaScript

$('#myCarousel').carousel({
    interval: 10000
})

$('.carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo($(this));
    } else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});