Bootstrap Carousel Thumbnail Border not auto updating.

Question

When the carousel goes to the next slide the border on the thumbnails should move to the next thumbnail to correspond with that image change. They do not. I discovered this error when adding a closing div to .carousel-inner that wasnt there it was causing my carousel to collapse after the last slide. Here is the code.

HTML

          <div class="carousel-inner">
            <div class="active item" data-slide-number="0">
              <img src="img/100325-01.jpg" class="img-responsive" alt="Regional Open Space Comparison" />
                 <div class="carousel-caption"><p></p>
                   <div class="photo-credit"><p>Photo Credit:<br />Media: Please submit high-resolution image requests to</p>
                   </div>
                 </div>                     
            </div>
            <div class="item" data-slide-number="1">
              <img lazy-src="img/100325-02.jpg" class="img-responsive" alt="Ecological Analysis" />
                <div class="carousel-caption"><p></p>
                  <div class="photo-credit"><p>Photo Credit: <br />Media: Please submit high-resolution image requests to</p>
                  </div>
                </div>             
             </div>
           </div>

CSS

  .carousel-selector > .active, .selected img {
   border: solid 2px #003C30;
   }

JS

$('#myCarousel').carousel({
interval: 13000
});

 // handles the carousel thumbnails
 $('.carousel-selector').click(function () {
  var selectorIdx = $(this).closest('li').index();

$('#myCarousel')
  .carousel(selectorIdx)
  .find('.carousel-selector').removeClass('selected')
  .eq(selectorIdx).addClass('selected')
  .end()
  .find('.item').removeClass('selected')
  .eq(selectorIdx).addClass('active');
 });

Answer 1

Here's how you'd do it by index rather than all that string parsing.

$('.carousel-selector').click(function () {
    $('#myCarousel').find('.carousel-selector').removeClass('selected');

    var selectorIdx = $(this).addClass('selected').closest('li').index();

    $('#myCarousel').find('.item').removeClass('selected')
        .eq(selectorIdx).addClass('selected');

    $('#myCarousel').carousel(selectorIdx);
});

Demo

Note that 1) I've added classes to each control element, and 2) I've removed the previous/next controls because they were overlapping the individual controls.

Here's a fun chained version:

$('#myCarousel')
      .carousel(selectorIdx)
      .find('.carousel-selector').removeClass('selected')
      .eq(selectorIdx).addClass('selected')
      .end()
      .find('.item').removeClass('selected')
      .eq(selectorIdx).addClass('active');

Demo 2