Bootstrap carousel：carousel-indicators 不改变大小/类

Question

我想要图片下方的轮播指示器。这需要一些样式更改才能仍然使用 Bootstrap 进行此轮播（请参阅下面的完整代码）。我将border-color 添加到指标中，并为carousel-indicators 类添加了一些样式：position:static; padding-top:10px; width: 100%; margin-left:0;。

问题在于指标的大小。如果访问者单击其中一个指示器，则轮播将正确转到该图像。 但是，指标并没有改变：也就是说，以active 开头的指标仍然比其他两个指标大（您现在希望点击的指标更大）。第一个指标继续保持activeclass。什么可能导致此问题？

<div id="carouselvideo" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
    </div>
    <div class="item">
      <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
    </div>
    <div class="item">
      <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
    </div>
  </div>
</div>

<script>       //The problem persists also if I remove this script line.
  $("#carouselvideo").carousel({interval: false});
</script>

<ol class="carousel-indicators" style="position:static; padding-top:10px; width: 100%; margin-left:0;">
  <li data-target="#carouselvideo" data-slide-to="0" style="border-color: #333;" class="active"></li>
  <li data-target="#carouselvideo" data-slide-to="1" style="border-color: #333;"></li>
  <li data-target="#carouselvideo" data-slide-to="2" style="border-color: #333;"></li>
</ol>

---

更新：如果我在carouselvideo div 内移动最后五行，那么问题就消失了。但是，我不想在那里，因为我想要轮播下方的指示器（请参阅How to create this bootstrap carousel of iframes?）。为什么将指标代码放在轮播外面会出现这个问题？

Answer 1

这是一个引导轮播的工作示例，指标工作正常。您在 iframe src 末尾缺少一些引号，这可能会导致一些问题，但您可以在此小提琴 http://jsfiddle.net/wamosjk/auotu240/ 找到一个工作示例，这是代码

 <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">

        <div class="item active">
          <iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>

        </div><!-- End Item -->

         <div class="item">
         <iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>

        </div><!-- End Item -->

        <div class="item">
          <iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>

        </div><!-- End Item -->
      </div><!-- End Carousel Inner -->
      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div><!-- End Carousel -->

您可以取出脚本并将 data-interval="false" 也放入您的轮播中，但如果您仍然遇到问题，则由您自己决定，那么很可能是之前提到的一些 css 或 javascript 问题.如果您不想要这些控件，您可以将它们取出并保留指标。

我发现如果你想要轮播之外的指示器，活动类不再切换，所以你需要添加以下脚本

<script>
$(".carousel-indicators li").on('click', function(){
    $(this).siblings().removeClass('active')
    $(this).addClass('active');
})
</script>