<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav "> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">Industrial Maintenance</a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Manufacturing Process</a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Job Skills</a></li> <li data-target="#myCarousel" data-slide-to="3"><a href="#">Education Biology</a></li> <li data-target="#myCarousel" data-slide-to="4"><a href="#">Education Chemistry</a></li> <li data-target="#myCarousel" data-slide-to="5"><a href="#">Industrial Safety</a></li> </ul> </nav> </div> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/158337218" width="500" height="315"></iframe> </div> </div><!-- End Item --> <div class="item"> <div class="embed-container"><iframe src='https://player.vimeo.com/video/157418212' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen></iframe></div> <h3>Second Stat</h3> </div><!-- End Item --> <div class="item"> <div class="embed-container"><iframe src='https://player.vimeo.com/video/157418211' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen></iframe></div> <h3>Third Stat</h3> </div><!-- End Item --> <div class="item"> <div class="embed-container"><iframe src='https://player.vimeo.com/video/157418207' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen></iframe></div> <h3>Fourth</h3> </div><!-- End Item --> <div class="item"> <div class="embed-container"><iframe src='https://player.vimeo.com/video/158334850' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen></iframe></div> <h3>Fifth Stat</h3> </div> <div class="item"> <div class="embed-container"><iframe src='https://player.vimeo.com/video/158335240' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen></iframe></div> <h3>Sixth Stat</h3> </div> </div><!-- End Carousel Inner --> </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: 0 }); 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; }); }); $(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).fadeIn("fast"); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }, function() { $('.dropdown-menu', this).stop( true, true ).fadeOut("fast"); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }); });