<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 class="row">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<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>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
<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/157418203' width="500" height="315" frameborder='0' webkitAllowFullScreen mozallowfullscreen></iframe></div>
<h3>Our modules have been used to train over 3000000 users</h3>
</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 -->
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
$(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");
});
});
$(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;
});
});
