<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 ---------->
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Link</a>
<a class="mdl-navigation__link" href="#">Link</a>
<a class="mdl-navigation__link" href="#">Link</a>
<a class="mdl-navigation__link" href="#">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">AGENTE DE CARGA<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">AGENTE ADUANAL<small>Lorem ipsum dolor sit</small></a></li>
</ul>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span aria-hidden="true"><i class="fa fa-chevron-circle-left"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span aria-hidden="true"><i class="fa fa-chevron-circle-right"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span aria-hidden="true"><i class="fa fa-chevron-circle-left"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span aria-hidden="true"><i class="fa fa-chevron-circle-right"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<h4>Service Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span aria-hidden="true"><i class="fa fa-chevron-circle-left"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span aria-hidden="true"><i class="fa fa-chevron-circle-right"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#FBFBFA;
}
#myCarousel .nav a {
border-radius:0px;
}
$(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;
});
});
$(document).ready(function(){
$('.carousel').carousel({
pause: true,
interval: false
});
});
$(document).ready(function(){
$(".col-md-3 ").mouseenter(function(){
$(this).find(".col-img-responsive02").show(200);
});
$(".col-md-3").mouseleave(function(){
$(this).find(".col-img-responsive02").hide();
});
});
