<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"> <!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About</a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects</a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio</a></li> </ul> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <section class="content"> <div class="panel panel-default"> <div class="panel-body"> <div class="table-container"> <table class="table table-filter"> <tbody> <tr data-status="approved"> <td> <div class="media"> <a href="#" class="pull-left"> <img src="http://via.placeholder.com/128x128" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">December 23, 2017</span> <h4 class="title"> Olympic </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </section> </div> </div> <!-- End Item --> <div class="item"> <div class="row"> <section class="content"> <div class="panel panel-default"> <div class="panel-body"> <div class="table-container"> <table class="table table-filter"> <tbody> <tr data-status="approved"> <td> <div class="media"> <a href="#" class="pull-left"> <img src="http://via.placeholder.com/128x128" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">December 23, 2017</span> <h4 class="title"> Olympic </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </section> </div> </div> <!-- End Item --> <div class="item"> <div class="row"> <section class="content"> <div class="panel panel-default"> <div class="panel-body"> <div class="table-container"> <table class="table table-filter"> <tbody> <tr data-status="approved"> <td> <div class="media"> <a href="#" class="pull-left"> <img src="http://via.placeholder.com/128x128" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">December 23, 2017</span> <h4 class="title"> Olympic </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </section> </div> </div> </div> </div> <!-- End Carousel --> </div>

body { padding-top: 20px; } #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; } .content h1 { text-align: center; } .content .content-footer p { color: #6d6d6d; font-size: 12px; text-align: center; } .content .content-footer p a { color: inherit; font-weight: bold; } /* -------------------------------------------------- :: Table Filter -------------------------------------------------- */ .panel { border: 1px solid #ddd; background-color: #fcfcfc; } .table-filter { background-color: #fff; border-bottom: 1px solid #eee; } .table-filter tbody tr:hover { cursor: pointer; background-color: #eee; } .table-filter tbody tr td { vertical-align: middle; border-top-color: #eee; } .table-filter tbody tr.selected td { background-color: #eee; } .table-filter tr td:first-child { width: 38px; } .table-filter tr td:nth-child(2) { width: 35px; } .table-filter .star { color: #ccc; text-align: center; display: block; } .table-filter .star.star-checked { color: #F0AD4E; } .table-filter .star:hover { color: #ccc; } .table-filter .star.star-checked:hover { color: #F0AD4E; } .table-filter .media-photo { width: 35px; } .table-filter .media-body { display: block; /* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */ } .table-filter .media-meta { color: #999; } .table-filter .media .title { color: #2BBCDE; line-height: normal; margin: 0; } .table-filter .media .title span.approved { color: #5cb85c; } .table-filter .media .title span.pending { color: #f0ad4e; } .table-filter .media .title span.rejected { color: #d9534f; } .table-filter .media .summary { font-size: 14px; }

$(document).ready( function() { 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; }); });