Bootstrap 3 Thumbnail Slider
For Example, Thumbnail Slider In Bootstrap 3
Demo
HTML
<div class="row"> <div class="col-xs-12"> <div class="well"> <div id="carousel-slider" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-xs-3"><a href="#"><img src="img/slide-1.jpg" alt="Image" class="img-responsive"></a> </div> <div class="col-xs-3"><a href="#"><img src="img/slide-2.jpg" alt="Image" class="img-responsive"></a> </div> <div class="col-xs-3"><a href="#"><img src="img/slide-3.jpg" alt="Image" class="img-responsive"></a> </div> <div class="col-xs-3"><a href="#"><img src="img/slide-4.jpg" alt="Image" class="img-responsive"></a> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-xs-3"><a href="#"><img src="img/slide-5.jpg" alt="Image" class="img-responsive"></a> </div> <div class="col-xs-3"><a href="#"><img src="img/slide-6.jpg" alt="Image" class="img-responsive"></a> </div> <div class="col-xs-3"><a href="#"><img src="img/slide-7.jpg" alt="Image" class="img-responsive"></a> </div> <div class="col-xs-3"><a href="#"><img src="img/slide-8.jpg" alt="Image" class="img-responsive"></a> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-xs-3"><a href="#"><img src="img/slide-9.jpg" alt="Image" class="img-responsive"></a> </div> <div class="col-xs-3"><a href="#"><img src="img/slide-10.jpg" alt="Image" class="img-responsive"></a> </div> <div class="col-xs-3"><a href="#"><img src="img/slide-11.jpg" alt="Image" class="img-responsive"></a> </div> <div class="col-xs-3"><a href="#"><img src="img/slide-12.jpg" alt="Image" class="img-responsive"></a> </div> </div> </div> </div> <a class="left carousel-control" href="#carousel-slider" data-slide="prev">‹</a> <a class="right carousel-control" href="#carousel-slider" data-slide="next">›</a> </div> </div> </div> </div>
CSS
<style> .carousel-control { font-size: 40px; padding-top: 5%; width: 5%; } </style>
Jquery
$(document).ready(function() { $('#carousel-slider').carousel({ interval: 10000 }) $('#carousel-slider').on('slid.bs.carousel', function() { //alert("slid"); }); });