title: bootstrap carousel indicators not changing on click
body: <p>I have the code below that I wish to modify. I have separated the indicators from the bootstrap carousel. The slide is working fine but when I click on the list of indicators the image changes correspondingly but the indicator's indication is not changing.
  I tried to modify it by assign the function to on click event but in vain.
  Advanced thanks for help</p>
  
  <p><br/>
  CSS:
  </p>
  
  <pre><code>.carousel-inner &gt; .item &gt; img {
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: auto;
      background-color:rgba(128,128,128,0.4);
  }
  #containerC {
      display: table-cell; 
      vertical-align: middle ;
      background-color: grey;
      width: 270px;
      height:270px;
      padding: 10px;
  }
  .carousel-indicators li {
      background-color: #999;
      background-color: rgba(70,70,70,.25);
  }
  .carousel-indicators .active {
      background-color: #444;
  }
  </code></pre>
  
  <p><br/>
  HTML:
  </p>
  
  <pre><code>&lt;div id="containerC"&gt;
    &lt;div id="carousel-example-generic" class="carousel" data-ride="carousel"&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item product active"&gt;
        &lt;img src="images/Test1.jpg" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item product"&gt;
        &lt;img src="images/Test2.jpg" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item product"&gt;
        &lt;img src="images/Test3.jpg" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Indicators --&gt;
  &lt;ol class="carousel-indicators"&gt;
    &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
    &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
    &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p><br/>
  Javascript:
  </p>
  
  <pre><code>$(document).ready(function(){
      console.log("hello world");
      $('#carousel-example-generic').on('slide.bs.carousel', function () {
          $holder = $( "ol li.active" );
          $holder.next( "li" ).addClass("active");  
          if($holder.is(':last-child'))
          {
              $holder.removeClass("active");
              $("ol li:first").addClass("active");
          }
          $holder.removeClass("active");
      });
  
      $('.carousel-indicators ol li').on("click",function(){
          $('.carousel-indicators ol li.active').removeClass("active");
          $(this).addClass("active");
      });
  });
  </code></pre>