<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 --> <div class="carousel-inner"> <div class="item active"> <img src="http://new.fishpal.com/assets/img/homepage/image1.jpg"> <div class="carousel-caption"> </div> </div><!-- End Item --> <div class="item"> <img src="http://new.fishpal.com/assets/img/homepage/image2.jpg"> <div class="carousel-caption"> </div> </div><!-- End Item --> <div class="item"> <img src="http://3.bp.blogspot.com/-1rQdFwo2_4g/Vo6KERD4pgI/AAAAAAAAbPs/OJxb46rfokY/s1600/P1060155.jpg"> <div class="carousel-caption"> </div> </div><!-- End Item --> </div><!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified" id="testID"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">Yesterday’s Catches</a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Today’s River Levels</a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Tomorrow’s Availability</a></li> </ul> </div><!-- End Carousel --> </div>

body { padding-top: 20px; } #myCarousel .nav a small { display:block; } #myCarousel .nav { background:#eee; } #myCarousel .nav a { border-radius:0px; }

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