<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="thumbCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner thumb-inner"> <div class="active item"> <div class="col-xs-12 slide1 slider-div"> <img src="http://placehold.it/250/f00/fff&text=1" alt="Demo Image"> </div> </div><!--/item--> <div class="item"> <div class="col-xs-12 fade1 slider-div"> <img src="http://placehold.it/250/f00/fff&text=2" alt="Demo Image"> </div> </div><!--/item--> <div class="item"> <div class="col-xs-12 slide2 slider-div"> <img src="http://placehold.it/250/f00/fff&text=3" alt="Demo Image"> </div> </div><!--/item--> <div class="item"> <div class="col-xs-12 fade2 slider-div"> <img src="http://placehold.it/250/f00/fff&text=4" alt="Demo Image"> </div> </div><!--/item--> </div><!--/carousel-inner--> <a class="right carousel-control" data-href="#thumbCarousel" data-target="#thumbCarousel" data-toggle="carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <a class="left carousel-control" data-href="#thumbCarousel" data-target="#thumbCarousel" data-toggle="carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <ul class="nav nav-justified nav-carousel"> <li data-target="#thumbCarousel" data-slide-to="0" class="carousel-border active"><a data-href="#"><img src="http://placehold.it/80x60&text=1" class="img-responsive"></a></li> <li data-target="#thumbCarousel" data-slide-to="1" class="carousel-border"><a data-href="#"><img src="http://placehold.it/80x60&text=2" class="img-responsive"></a></li> <li data-target="#thumbCarousel" data-slide-to="2" class="carousel-border"><a data-href="#"><img src="http://placehold.it/80x60&text=3" class="img-responsive"></a></li> <li data-target="#thumbCarousel" data-slide-to="3" class="carousel-border"><a data-href="#"><img src="http://placehold.it/80x60&text=4" class="img-responsive"></a></li> </ul> </div><!--/myCarousel-->

/*@media (min-width: 767px) { .nav-justified > li{ float:none; } }*/ .carousel{ margin-bottom:10%; } .carousel-inner { margin-bottom:10%; } .carousel-indicators { position: absolute; bottom: -15%; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; } .carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #fff \9; background-color: rgba(255, 255, 255, 0); border: 1px solid #ff0000; border-radius: 10px; } .carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #ff0000; } .carousel-control{ cursor:pointer; } .carousel-inner .active.left{ left: -25%; } .carousel-inner .next{ left:25%; } .carousel-inner .prev{ left:-25%; } .carousel-control{ width:4%; } .carousel-control.left{ margin-left:0; background-image:none; } .carousel-control.right{ margin-right:0; background-image:none; } .thumb-inner .thumb2-inner{ background:#fff; } /*Hide Carousel Controls until hover*/ .carousel .carousel-control{ display:none; } /*Display Carousel Controls on hover*/ .carousel:hover .carousel-control{ display:block; } #thumb-inner > .item{ position:relative; overflow:hidden; } #thumb-inner > .item > a img{ position:relative; overflow:hidden; } .carousel > .thumb-inner{ width:100%; position:relative; left:0; right:0; margin:auto; } .nav-carousel { padding-bottom: 0%; width: 100%; z-index: 101; -webkit-transition: all 3s ease-in-out; transition: all 3s ease-in-out; float: none; margin: 0; height: auto; position: absolute; top: 100%; bottom: 0; } .nav-carousel li{ } .nav-carousel li > a{ padding: 0; } .nav-carousel li > a:hover{ background-color: transparent; cursor: pointer; } .carousel-border{ } .nav-carousel > .active > a, .nav-carousel > .active > a:hover, .nav-carousel > .active > a:focus, #carousel a:hover, #carousel a:focus{ outline:none; cursor:pointer; } .nav-carousel.affix{ width: 100%; position: static; z-index:101; height:auto; padding-bottom:0%; } .nav-carousel > li{ z-index:100; padding-bottom:0%; } .slider-div { padding-left: 0; padding-right: 0; } .slider-div img { width: 100%; }

$(document).ready(function() { $('#thumbCarousel').carousel({ interval: 3000 }) }); /* affix the Carousel Buttons to Carousel Item on scroll */ $('.nav-carousel').bind({ offset: { top: $('#thumbCarousel').height()-$('.nav-carousel').height() } }); $(document).ready( function() { var carouselContainer = $('.carousel'); var slideInterval = 2500; $('#carousel').carousel({ interval: slideInterval }); var clickEvent = false; $('#thumbCarousel').on('click', '.nav-carousel a', function() { clickEvent = true; $('.nav-carousel li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.nav-carousel').children().length -1; var current = $('.nav-carousel li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.nav-carousel li').first().addClass('active'); } } clickEvent = false; }); });