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

<强> 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

Bootstrap Carousel Thumbnail Border不自动更新。

1 个答案: