<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="myCarouselWrapper" class="container-fluid"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="item-item col-md-3 col-sm-4"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></a></div> </div> <div class="item"> <div class="item-item col-md-3 col-sm-4"><a href="#"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></a></div> </div> <div class="item"> <div class="item-item col-md-3 col-sm-4"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div> </div> <div class="item"> <div class="item-item col-md-3 col-sm-4"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div> </div> <div class="item"> <div class="item-item col-md-3 col-sm-4"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></a></div> </div> <div class="item"> <div class="item-item col-md-3 col-sm-4"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a></div> </div> <div class="item"> <div class="item-item col-md-3 col-sm-4"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=7" class="img-responsive"></a></div> </div> <div class="item"> <div class="item-item col-md-3 col-sm-4"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=8" class="img-responsive"></a></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> </div>

@media (min-width: 768px) and (max-width: 991px) { #myCarousel .carousel-inner .item .item-item:last-child { display: none; } } @media (max-width: 768px) { #mymyCarousel .carousel-inner { height: 320px; } } .carousel-inner { overflow-y: hidden; } .carousel-inner .active.left { left: -25%; } .carousel-inner .next { left: 25%; } .carousel-inner .prev { left: -25%; } .carousel-control { width: 4%; } .carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;} .carousel-inner .item-item { padding:0!important; }

$('#myCarousel').carousel({ interval: 4000 }); $('.carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (var i=0;i<2;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } });