关于javascript：Bootstrap轮播：轮播指标不会更改大小/类


Bootstrap carousel: carousel-indicators not changing size/class

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

问题在于指标的大小。如果访客单击指示符之一，则轮播会正确转到该图像。但是，指标不会改变：也就是说，以active开头的指标仍大于其他两个指标(您现在希望单击的指标会更大)。第一个指示器继续保持active class。什么可能导致此问题？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
      <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframex>
   
   
      <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframex>
   
   
      <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframex>
   
 


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



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

更新：如果我在carouselvideo div内移动了最后五行，那么问题就消失了。但是，我不希望它在那里，因为我希望转盘下方有指标(请参见如何创建iframe的自举转盘？)。当指标代码放置在轮播之外时，为什么会出现此问题？

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
      <!-- 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>

     

      <!-- Wrapper for slides -->
     

       
          &lt;iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx">&lt;/iframex&gt;

        <!-- End Item -->

         
         &lt;iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx">&lt;/iframex&gt;

        <!-- End Item -->

       
          &lt;iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx">&lt;/iframex&gt;

        <!-- End Item -->
      <!-- End Carousel Inner -->
      <!-- Controls -->
     
        <span class="glyphicon glyphicon-chevron-left"></span>
     
     
        <span class="glyphicon glyphicon-chevron-right"></span>
     
    <!-- End Carousel -->

您可以取出脚本，也只需将data-interval =" false"放入轮播中，但是如果您仍然遇到问题，则由您自己决定，那么可能还有一些以前提到的CSS或javascript问题。如果您不想要这些控件，则可以删除它们，而只需保留指示器即可。

我发现，如果您希望指示器不在轮播中，则活动类将不再切换，因此您需要添加以下脚本

1
2
3
4
$(".carousel-indicators li").on('click', function(){
    $(this).siblings().removeClass('active')
    $(this).addClass('active');
})
相关讨论