引导转盘:转盘指示器不改变大小/类别

Bootstrap carousel: carousel-indicators not changing size/class

本文关键字：改变 类别 指示器      更新时间：2023-09-26

我想要图像下方的转盘指示器。这需要对样式进行一些更改，以便仍然使用Bootstrap进行旋转木马（请参阅下面的完整代码）。我在指示符中添加了border-color，在carousel-indicators类中添加了一些样式：position:static; padding-top:10px; width: 100%; margin-left:0;。

问题在于指标的规模。如果访问者单击其中一个指示器，转盘将正确转到该图像但是，指示符不会改变：也就是说，以active开头的指示符仍然大于其他两个指示符（您现在希望单击的指示符是较大的指示符）。第一指示符继续保持active class。是什么原因导致了这个问题？

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

更新：如果我移动carouselvideodiv内的最后五行，那么问题就解决了。然而，我不想在那里，因为我想要转盘下面的指示符（请参阅如何创建这个iframe的引导转盘？）。当指示器代码放置在转盘之外时，为什么会出现这个问题？

这里是一个引导程序转盘的工作示例，指示器工作得很好。你在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 -->

您可以取出脚本，只需将datainterval="false"放在您的旋转木马中，但这取决于您是否仍然存在问题，那么可能存在一些比以前声明的css或javascript问题更大的问题。如果你不想要的话，你可以去掉控制装置，只保留指示器。

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

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