<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 class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <ul class="carousel-inner"> <li class="item row active"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> </li> <!-- End Item --> <li class="item row"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> </li> <!-- End Item --> <li class="item row"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> </li> <!-- End Item --> <li class="item row"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us" class="col-lg-4"> </li> <!-- End Item --> </ul> <!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified "> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li> </ul> </div> <!-- End Carousel --> </div>

.carousel-inner{ padding:0; } #myCarousel .nav a small { display: block; } #myCarousel .nav { background: #eee; } .nav-justified > li > a { border-radius: 0px; } .nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; } .nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; } .nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; } .nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }

$(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; }); });