<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 id="MeuCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://fakeimg.pl/1920x200/"> <div class="carousel-caption"> <h3>SLIDE 1</h3> </div> </div> <!-- End Item --> <div class="item"> <img src="http://fakeimg.pl/1920x200/"> <div class="carousel-caption"> <h3>SLIDE 2</h3> </div> </div> <!-- End Item --> <div class="item"> <img src="http://fakeimg.pl/1920x200/"> <div class="carousel-caption"> <h3>SLIDE 3</h3> </div> </div> <!-- End Item --> <div class="item"> <img src="http://fakeimg.pl/1920x200/"> <div class="carousel-caption"> <h3>SLIDE 4</h3> </div> </div> <!-- End Item --> <div class="item"> <img src="http://fakeimg.pl/1920x200/"> <div class="carousel-caption"> <h3>SLIDE 5</h3> </div> </div> <!-- End Item --> <div class="item"> <img src="http://fakeimg.pl/1920x200/"> <div class="carousel-caption"> <h3>SLIDE 6</h3> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified"> <li data-target="#MeuCarousel" data-slide-to="0" class="active"> <a href="#"> <img src="http://fakeimg.pl/60x60/" alt="aviacao-icon.png" /> <h2>SLIDE 1</h2> </a> </li> <li data-target="#MeuCarousel" data-slide-to="1"> <a href="#"> <img src="http://fakeimg.pl/60x60/" alt="Energia" /> <h2>SLIDE 2</h2> </a> </li> <li data-target="#MeuCarousel" data-slide-to="2"> <a href="#"> <img src="http://fakeimg.pl/60x60/" alt="Ferrovias" /> <h2>SLIDE 3</h2> </a> </li> <li data-target="#MeuCarousel" data-slide-to="3"> <a href="#"> <img src="http://fakeimg.pl/60x60/" alt="Segurança Pública" /> <h2>SLIDE 4</h2> </a> </li> <li data-target="#MeuCarousel" data-slide-to="4"> <a href="#"> <img src="http://fakeimg.pl/60x60/" alt="Marítimo" /> <h2>SLIDE 5</h2> </a> </li> <li data-target="#MeuCarousel" data-slide-to="5"> <a href="#"> <img src="http://fakeimg.pl/60x60/" alt="Outros" /> <h2>SLIDE 6</h2> </a> </li> </ul> <a href="#MeuCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a href="#MeuCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> <!-- End Carousel -->

/***************************************** BANNER INICIAL *****************************************/ .carousel .item img{ width:100%; } .carousel .nav { text-align:center; margin:0 auto; max-width:1140px; } .carousel .nav li img { text-align:center; margin:0 auto; padding:15px 0 0 0; } .carousel h2{ text-transform:uppercase; font-size:18px; text-align:center; } .carousel li.active { background: #90d91b; } .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { color:#fff; background: #90d91b; } .nav-pills a:hover{ z-index:99; background: #90d91b; color:#fff; position: relative; cursor:pointer; } li:hover{ z-index:99; background: #90d91b; color:#fff; position: relative; cursor:pointer; } li.active>a{ z-index:99; background: #90d91b; color:#fff; position: relative; top: -20px; cursor:pointer; } .nav-pills>li.active>a{ z-index:99; background: #90d91b; color:#fff; position: relative; top: -20px; cursor:pointer; } .carousel-control i { position: relative; top:50%; bottom: 0; left: 0; right:0; width: 100%; font-size: 90px; color: #90d91b; text-align: center; text-shadow: none; filter: none; opacity: 1; } .carousel-caption { position: absolute; top:45%; z-index: 10; padding-top: 0px; padding-bottom: 0px; color: #fff; } .carousel-caption h3 { font-size:88px; right: 0; top:0; left: 0; z-index: 10; color: #90d91b; text-align: center; text-shadow: 5px 5px 0px rgba(0,0,0,.9); }

jQuery(document).ready(function($){ $('#MeuCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#MeuCarousel').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; }); });