<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="carousel slide multi-item-carousel" id="theCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div> </div> <!-- add more items here --> <!-- Example item start: --> <div class="item"> <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div> </div> <!-- Example item end --> </div> <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- bootstrap --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4836781590296812" data-ad-slot="8856753404" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>

.multi-item-carousel .carousel-inner > .item { -webkit-transition: 500ms ease-in-out left; transition: 500ms ease-in-out left; } .multi-item-carousel .carousel-inner .active.left { left: -33%; } .multi-item-carousel .carousel-inner .active.right { left: 33%; } .multi-item-carousel .carousel-inner .next { left: 33%; } .multi-item-carousel .carousel-inner .prev { left: -33%; } @media all and (transform-3d), (-webkit-transform-3d) { .multi-item-carousel .carousel-inner > .item { -webkit-transition: 500ms ease-in-out left; transition: 500ms ease-in-out left; -webkit-transition: 500ms ease-in-out all; transition: 500ms ease-in-out all; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-transform: none!important; transform: none!important; background:#fff; } } .multi-item-carousel .carouse-control.left, .multi-item-carousel .carouse-control.right { background-image: none; } .item .col-xs-4{text-align:center;} .item .col-xs-4 a img{display:inline-block;width: 80%;} .carousel-control {width: 5%;}

$(document).ready(function () { // Instantiate the Bootstrap carousel $('.multi-item-carousel').carousel({ interval: false }); // for every slide in carousel, copy the next slide's item in the slide. // Do the same for the next, next item. $('.multi-item-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)); } }); });