Cara buat carousel indicators di menu nav pada booststrap

Assalamu'alaikum wr wb
Kali ini saya akan share bagaimana Cara buat carousel indicators di menu nav pada booststrap.
Berikut ini syntaxnya.
---------------------------------------------
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<style type="text/css">
/* CSS used here will be applied after bootstrap.css */

.navbar-nz .navbar-nav>.active>a, .navbar-nz .navbar-nav>.active>a:hover, .navbar-nz .navbar-nav>.active>a:focus {
color: #FFFFFF;
background-color: #020304;
border: 1px solid #FFFFFF;
}

.navbar-toggle
{
  border: 1px solid #FFFFFF;
  background-color: #020304;
}

.navbar-nz .navbar-toggle .icon-bar {
    background-color: #FFFFFF;
}
</style>

<nav class="navbar navbar-nz" 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="#nz-carousel" data-slide-to="0" class="myCarousel-target active"><a href="#">slide 1</a></li>
                    <li data-target="#nz-carousel" data-slide-to="1" class="myCarousel-target"><a href="#">slide 2</a></li>
                    <li data-target="#nz-carousel" data-slide-to="2" class="myCarousel-target"><a href="#">slide 3</a></li>
                </ol>
            </div>
        </nav>  

<div id="nz-carousel" class="carousel slide">
       <div class="carousel-inner">
          <div data-slide-no="0" class="item carousel-item active">
             <div class="wrapper">
                <img src="https://placeholdit.imgix.net/~text?txtsize=40&bg=020304&txtclr=ffffff&txt=SLIDE%201&w=1170&h=300" width="100%">
             </div>
          </div>
          <div data-slide-no="1" class="item carousel-item">
             <div class="wrapper">
                <img src="https://placeholdit.imgix.net/~text?txtsize=40&bg=020304&txtclr=ffffff&txt=SLIDE%202&w=1170&h=300" width="100%">
             </div>
          </div>
          <div data-slide-no="2" class="item carousel-item">
             <div class="wrapper">
                <img src="https://placeholdit.imgix.net/~text?txtsize=40&bg=020304&txtclr=ffffff&txt=SLIDE%203&w=1170&h=300" width="100%">
             </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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  $(".carousel").carousel({
    interval: 5000
  });
  $('#nz-carousel').on('slide.bs.carousel', function () {
     
 
    $(".myCarousel-target.active").removeClass("active");
   
    $('#nz-carousel').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");
     
     });
   });
   
});
</script>
---------------------------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.nl/