<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 class="container-fluid" style="margin-left:5px;"> <div class="well" style="border:0px solid grey;background: transparent;"> <div id="myCarousel_Scroller" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-md-12 thumbnailsclients"> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient1"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient2"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient3"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient4"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient5"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient6"> </a> </div> </div> </div> <div class="item active"> <div class="row"> <div class="col-md-12 thumbnailsclients"> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient7"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient8"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient9"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient10"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient11"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="imageclient12"> </a> </div> </div> </div> </div> <!--/row--> </div> <!--/item--> <div class="item"> <div class="row"> <div class="col-md-12 thumbnailsclients"> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="img-responsive"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="img-responsive"> </a> </div> <div class="col-md-2 col-xs-2"> <a class="thumbnail"> <img src="http://placehold.it/250x250" alt="Image" class="img-responsive"> </a> </div> </div> </div> <!--/row--> </div> <!--/item--> </div> <!--/carousel-inner--> <a class="left carousel-control center-block" href="#myCarousel_Scroller" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control center-block" href="#myCarousel_Scroller" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> <!--/myCarousel--> </div> <!--/well--> </div>

.carousel-inner img { width: auto; height: 100px; max-height: 100px; } .carousel-inner { max-height: 110px; overflow:visible; } .thumbnail{ border:0px solid #ddd; background-color: transparent; } .carousel-control.left{ background-image:none; } .carousel-inner img{ height:84px; } .carousel-control.right{ background-image:none; }

$(document).ready(function(){ $('.carousel').carousel({ interval: false }); })