"Bootstrap Carousel Indicators in the Navbar"
Bootstrap 3.3.0 Snippet by Dobromirg

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <title>Indicators in Navbar</title> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <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 navbar-ex1-collapse"> <ol class="nav navbar-nav nav-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="myCarousel-target active"> <a href="#">Slide 1</a> </li> <li data-target="#myCarousel" data-slide-to="1" class="myCarousel-target"> <a href="#">Slide 2</a> </li> <li data-target="#myCarousel" data-slide-to="2" class="myCarousel-target"> <a href="#">Slide 3</a> </li> <li data-target="#myCarousel" data-slide-to="3" class="myCarousel-target"> <a href="#">Slide 4</a> </li> <li data-target="#myCarousel" data-slide-to="4" class="myCarousel-target"> <a href="#">Slide 5</a> </li> <li data-target="#myCarousel" data-slide-to="5" class="myCarousel-target"> <a href="#">Slide 6</a> </li> </ol> </div> </nav> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div data-slide-no="0" class="item carousel-item active"> <div class="wrapper"> <img src="http://placehold.it/600x200?text=Slide+1" class="img-responsive" style="width:100%; height:auto;"> </div> </div> <div data-slide-no="1" class="item carousel-item"> <div class="wrapper"> <img src="http://placehold.it/600x200?text=Slide+2" class="img-responsive" style="width:100%; height:auto;"> </div> </div> <div data-slide-no="2" class="item carousel-item"> <div class="wrapper"> <img src="http://placehold.it/600x200?text=Slide+3" class="img-responsive" style="width:100%; height:auto;"> </div> </div> <div data-slide-no="3" class="item carousel-item"> <div class="wrapper"> <img src="http://placehold.it/600x200?text=Slide+4" class="img-responsive" style="width:100%; height:auto;"> </div> </div> <div data-slide-no="4" class="item carousel-item"> <div class="wrapper"> <img src="http://placehold.it/600x200?text=Slide+5" class="img-responsive" style="width:100%; height:auto;"> </div> </div> <div data-slide-no="5" class="item carousel-item"> <div class="wrapper"> <img src="http://placehold.it/600x200?text=Slide+6" class="img-responsive" style="width:100%; height:auto;"> </div> </div> </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> </body> </html>
$(document).ready(function() { $(".carousel").carousel({ interval: 5000 }); $('#myCarousel').on('slide.bs.carousel', function() { $(".myCarousel-target.active").removeClass("active"); $('#myCarousel').on('slid.bs.carousel', function() { var to_slide = $(".carousel-item.active").attr("data-slide-no"); $(".nav-indicators li[data-slide-to=" + to_slide + "]").addClass("active"); }); }); });

Related: See More

Gaia Bootstrap Template
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top
Transparent Sticky NavBar

Questions / Comments: