title: Bootstrap carousel thumbnails indicators
body: <p>I copy these code from the bootply sample code for carousel
  <a href="http://www.bootply.com/79859" rel="nofollow">http://www.bootply.com/79859</a></p>
  
  <p>But I am having problem with the image thumbnail because it is not working. It is not moving on the specific image while the big image is sliding. I dont' know if I missed a jquery that will support the indicators.</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;!-- thumb navigation carousel --&gt;
  &lt;div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs"&gt;
      &lt;!-- thumb navigation carousel items --&gt;
      &lt;ul class="list-inline"&gt;
          &lt;li&gt; &lt;a id="carousel-selector-0" class="selected"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=one" class="img-responsive"&gt;
        &lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt; &lt;a id="carousel-selector-1"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=two" class="img-responsive"&gt;
        &lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt; &lt;a id="carousel-selector-2"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=three" class="img-responsive"&gt;
        &lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt; &lt;a id="carousel-selector-3"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=four" class="img-responsive"&gt;
        &lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt; &lt;a id="carousel-selector-4"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=five" class="img-responsive"&gt;
        &lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt; &lt;a id="carousel-selector-5"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=six" class="img-responsive"&gt;
        &lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt; &lt;a id="carousel-selector-6"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=seven" class="img-responsive"&gt;
        &lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt; &lt;a id="carousel-selector-7"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=eight" class="img-responsive"&gt;
        &lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- main slider carousel --&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-12" id="slider"&gt;
          &lt;div class="col-md-12" id="carousel-bounding-box"&gt;
              &lt;div id="myCarousel" class="carousel slide"&gt;
                  &lt;!-- main slider carousel items --&gt;
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="active item" data-slide-number="0"&gt;
                          &lt;img src="http://placehold.it/1200x480&amp;amp;text=one" class="img-responsive"&gt;
                      &lt;/div&gt;
                      &lt;div class="item" data-slide-to="1"&gt;
                          &lt;img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"&gt;
                      &lt;/div&gt;
                      &lt;div class="item" data-slide-number="2"&gt;
                          &lt;img src="http://placehold.it/1200x480&amp;amp;text=three" class="img-responsive"&gt;
                      &lt;/div&gt;
                      &lt;div class="item" data-slide-number="3"&gt;
                          &lt;img src="http://placehold.it/1200x480&amp;amp;text=four" class="img-responsive"&gt;
                      &lt;/div&gt;
                      &lt;div class="item" data-slide-number="4"&gt;
                          &lt;img src="http://placehold.it/1200x480&amp;amp;text=five" class="img-responsive"&gt;
                      &lt;/div&gt;
                      &lt;div class="item" data-slide-number="5"&gt;
                          &lt;img src="http://placehold.it/1200x480&amp;amp;text=six" class="img-responsive"&gt;
                      &lt;/div&gt;
                      &lt;div class="item" data-slide-number="6"&gt;
                          &lt;img src="http://placehold.it/1200x480&amp;amp;text=seven" class="img-responsive"&gt;
                      &lt;/div&gt;
                      &lt;div class="item" data-slide-number="7"&gt;
                          &lt;img src="http://placehold.it/1200x480&amp;amp;text=eight" class="img-responsive"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- main slider carousel nav controls --&gt; &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;‹&lt;/a&gt;
  
                  &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;›&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--/main slider carousel--&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    .selected img {
      opacity:0.5;
      }
  </code></pre>
  
  <p>Jquery </p>
  
  <pre><code> $('#myCarousel').carousel({
   interval: 4000
   });
  
   // handles the carousel thumbnails
   $('[id^=carousel-selector-]').click( function(){
   var id_selector = $(this).attr("id");
   var id = id_selector.substr(id_selector.length -1);
   id = parseInt(id);
   $('#myCarousel').carousel(id);
   $('[id^=carousel-selector-]').removeClass('selected');
   $(this).addClass('selected');
   });
  
  // when the carousel slides, auto update
  $('#myCarousel').on('slid', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id^=carousel-selector-'+id+']').addClass('selected');
  });
  </code></pre>