<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://file.digikala.com/Digikala/Image/Webstore/ProductPhoto/P_105221/Original/af1b6b.jpg"> </div><!-- End Item --> <div class="item"> <img src="http://file.digikala.com/Digikala/Image/Webstore/ProductPhoto/P_105235/Original/96bc4e.JPG"> </div><!-- End Item --> <div class="item"> <img src="http://file.digikala.com/Digikala/Image/Webstore/ProductPhoto/P_34012/Original/f1db11.jpg"> </div><!-- End Item --> <div class="item"> <img src="http://file.digikala.com/Digikala/Image/Webstore/ProductPhoto/P_34012/Original/f24af1.jpg"> </div><!-- End Item --> <div class="item"> <img src="http://file.digikala.com/Digikala/Image/Webstore/ProductPhoto/P_34231/Original/b9e7f0.jpg"> </div><!-- End Item --> <div class="item"> <img src="http://file.digikala.com/Digikala/Image/Webstore/ProductPhoto/P_34231/Original/f45ad7.jpg"> </div><!-- End Item --> </div><!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><img src="http://off.irancenter.com/Images/FaraShop/Products/Thumbails/201511417231915.jpg" /></li> <li data-target="#myCarousel" data-slide-to="1"><img src="http://off.irancenter.com/Images/FaraShop/Products/Thumbails/2015114174925300.jpg" /></li> <li data-target="#myCarousel" data-slide-to="2"><img src="http://off.irancenter.com/Images/FaraShop/Products/Thumbails/2015113188464.jpg" /></li> <li data-target="#myCarousel" data-slide-to="3"><img src="http://off.irancenter.com/Images/FaraShop/Products/Thumbails/201511313936760.jpg" /></li> <li data-target="#myCarousel" data-slide-to="4"><img src="http://off.irancenter.com/Images/FaraShop/Products/Thumbails/201511417231915.jpg" /></li> <li data-target="#myCarousel" data-slide-to="5"><img src="http://off.irancenter.com/Images/FaraShop/Products/Thumbails/2015114174925300.jpg" /></li> </ul> </div><!-- End Carousel --> </div>

body { padding-top: 20px; width:200px; } .container{ width:500px; } #myCarousel .nav img { width:100%; } #myCarousel .nav { background:#eee; } #myCarousel .nav a { border-radius:0px; } .carousel-inner{ height:500px; } .carousel-inner .item{ height:100%; } .carousel-inner .item img{ position: absolute; top: 0; bottom: 0; margin: auto; }

$(document).ready( function() { $('#myCarousel').carousel({ //interval: 4000 }); var clickEvent = false; $('#myCarousel').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.nav').children().length -1; var current = $('.nav li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.nav li').first().addClass('active'); } } clickEvent = false; }); });