<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 ----------> <!-- bootstrap carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active srle"> <img src="https://s28.postimg.org/4237b0cjh/image.jpg" alt="1.jpg" class="img-responsive"> <div class="carousel-caption"> <p> 1.jpg </p> </div> </div> <div class="item"> <img src="https://s29.postimg.org/xaf064313/image.jpg" alt="2.jpg" class="img-responsive"> <div class="carousel-caption"> <p> 2.jpg </p> </div> </div> <div class="item"> <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" alt="3.jpg" class="img-responsive"> <div class="carousel-caption"> <p> 3.jpg </p> </div> </div> <div class="item"> <img src="https://s7.postimg.org/4z602gd8b/image.jpg" alt="4.jpg" class="img-responsive"> <div class="carousel-caption"> <p> 4.jpg </p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <!-- Thumbnails --> <ul class="thumbnails-carousel clearfix"> <li><img src="https://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1_tn.jpg"></li> <li><img src="https://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="1_tn.jpg"></li> <li><img src="https://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="1_tn.jpg"></li> <li><img src="https://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="1_tn.jpg"></li> </ul> </div> <script> // thumbnails.carousel.js jQuery plugin ;(function(window, $, undefined) { var conf = { center: true, backgroundControl: false }; var cache = { $carouselContainer: $('.thumbnails-carousel').parent(), $thumbnailsLi: $('.thumbnails-carousel li'), $controls: $('.thumbnails-carousel').parent().find('.carousel-control') }; function init() { cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix'); cache.$thumbnailsLi.first().addClass('active-thumbnail'); if(!conf.backgroundControl) { cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset'); } else { cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height()); } if(conf.center) { cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>"); } } function refreshOpacities(domEl) { cache.$thumbnailsLi.removeClass('active-thumbnail'); cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail'); } function bindUiActions() { cache.$carouselContainer.on('slide.bs.carousel', function(e) { refreshOpacities(e.relatedTarget); }); cache.$thumbnailsLi.click(function(){ cache.$carouselContainer.carousel($(this).index()); }); } $.fn.thumbnailsCarousel = function(options) { conf = $.extend(conf, options); init(); bindUiActions(); return this; } })(window, jQuery); $('.thumbnails-carousel').thumbnailsCarousel(); </script>

/* Just for demo */ body { padding: 10px; text-align: center; } #carousel-example-generic { display: inline-block; } /*****************************/ /* Plugin styles */ ul.thumbnails-carousel { padding: 5px 0 0 0; margin: 0; list-style-type: none; text-align: center; } ul.thumbnails-carousel .center { display: inline-block; } ul.thumbnails-carousel li { margin-right: 5px; float: left; cursor: pointer; } .controls-background-reset { background: none !important; } .active-thumbnail { opacity: 0.4; } .indicators-fix { bottom: 70px; }