Bootstrap Carousel縮略圖邊框無法自動更新。

Question

當輪播轉到下一張幻燈片時，縮略圖上的邊框應移至下一個縮略圖以與該圖像更改相對應。 他們不。 我在向.carousel-inner中添加一個關閉div時發現了此錯誤，但那並沒有導致上一張幻燈片后我的旋轉木馬崩潰。 這是代碼。

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);
});

演示

請注意，1）我向每個控件元素添加了類，2）我刪除了上一個/下一個控件，因為它們與單個控件重疊。

這是一個有趣的鏈接版本：

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

演示2