"Carousel Thumbnails"
Bootstrap 3.2.0 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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" style="margin-top:60px;"> <div class="row"> <div class="col-md-8"> <div id="carousel-reviews" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-3 col-sm-6"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> <div class="col-md-3 col-sm-6 hidden-xs"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> <div class="col-md-3 col-sm-6 hidden-sm hidden-xs"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> <div class="col-md-3 col-sm-6 hidden-sm hidden-xs"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> </div> <div class="item"> <div class="col-md-3 col-sm-6"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> <div class="col-md-3 col-sm-6 hidden-xs"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> <div class="col-md-3 col-sm-6 hidden-sm hidden-xs"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> <div class="col-md-3 col-sm-6 hidden-sm hidden-xs"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> </div> <div class="item"> <div class="col-md-3 col-sm-6"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> <div class="col-md-3 col-sm-6 hidden-xs"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> <div class="col-md-3 col-sm-6 hidden-sm hidden-xs"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> <div class="col-md-3 col-sm-6 hidden-sm hidden-xs"> <div class="rel zmin"> <img src="http://placehold.it/160x90" alt=""> </div> </div> </div> </div> <a class="left carousel-control" href="#carousel-reviews" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-reviews" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div>
.carousel-control.left,.carousel-control.right {background:#CCC;width:25px;} .carousel-control.left {left:-25px;} .carousel-control.right {right:-25px;} .block { display: block; } .zmin { z-index: 1; } .rel { position: relative; }

Related: See More


Questions / Comments: