Bootstrap Carousel Thumbnail Граница не автообновление.

Question

Когда карусель переходит к следующему слайду, рамка на миниатюрах должна перейти к следующему миниатюре, чтобы соответствовать изменению этого изображения. Они не. Я обнаружил эту ошибку при добавлении закрывающего div в .carousel-inner, который не был там, из-за чего моя карусель рухнула после последнего слайда. Вот код.

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

Вот как вы могли бы сделать это с помощью индекса, а не все, что строки синтаксического анализа.

$('.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

Обратите внимание, что 1) я добавил классы для каждого элемента управления, и 2) я удалил предыдущий/следующий контроль, потому что они перекрывают отдельные элементы управления.

Вот забавная прикован версия:

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

Demo 2