Bootstrap : Slider not working

Question

i am using this tabbed slider. Please visit link to see it in action. this is my CODE

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 4000
  });

  var clickEvent = false;

  $('#myCarousel').on('click', '.nav a', function() {
    clickEvent = true;
    $('.nav li').removeClass('active');
    $(this).parent().addClass('active');
  });

  $('#myCarousel').bind('slid', function() {
    // Get currently selected item
    var item = $('#myCarousel .carousel-inner .item.active');

    // Deactivate all nav links
    $('#myCarousel .nav li').removeClass('active');

    // Index is 1-based, use this to activate the nav link based on slide
    var index = item.index() + 1;
    $('#myCarousel .nav li:nth-child(' + index + ')').addClass('active');
  });
});

#myCarousel .nav a small {
  display: block;
}
#myCarousel .nav {
  background: #eee;
}
.nav-justified > li > a {
  border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a {
  background-color: #16a085;
}
.nav-pills>li[data-slide-to="1"].active a {
  background-color: #e67e22;
}
.nav-pills>li[data-slide-to="2"].active a {
  background-color: #2980b9;
}
.nav-pills>li[data-slide-to="3"].active a {
  background-color: #8e44ad;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
    </div>
    <!-- End Carousel Inner -->
    <ul class="nav nav-pills nav-justified">
      <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a>
      </li>
    </ul>
  </div>
  <!-- End Carousel -->
</div>

jQuery files that i've included

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

problem is that along with my slider active tab does not change. First tab is always active and top slider keeps on changing. Please if someone can help me with it

Answer 1

Please change event that carousel listens from slid to slid.bs.carousel

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 4000
  });

  var clickEvent = false;

  $('#myCarousel').on('click', '.nav a', function() {
    clickEvent = true;
    $('.nav li').removeClass('active');
    $(this).parent().addClass('active');
  });

  $('#myCarousel').on('slid.bs.carousel', function() {
    // Get currently selected item
    
    var item = $('#myCarousel .carousel-inner .item.active');

    // Deactivate all nav links
    $('#myCarousel .nav li').removeClass('active');

    // Index is 1-based, use this to activate the nav link based on slide
    var index = item.index() + 1;
    $('#myCarousel .nav li:nth-child(' + index + ')').addClass('active');
  });
});

#myCarousel .nav a small {
  display: block;
}
#myCarousel .nav {
  background: #eee;
}
.nav-justified > li > a {
  border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a {
  background-color: #16a085;
}
.nav-pills>li[data-slide-to="1"].active a {
  background-color: #e67e22;
}
.nav-pills>li[data-slide-to="2"].active a {
  background-color: #2980b9;
}
.nav-pills>li[data-slide-to="3"].active a {
  background-color: #8e44ad;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
      <div class="item">
        <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services">
        <div class="carousel-caption">
          <h3>Headline</h3>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
      </div>
      <!-- End Item -->
    </div>
    <!-- End Carousel Inner -->
    <ul class="nav nav-pills nav-justified">
      <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a>
      </li>
      <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a>
      </li>
    </ul>
  </div>
  <!-- End Carousel -->
</div>