引导轮播：轮播指示器不改变大小/类 [英] Bootstrap carousel: carousel-indicators not changing size/class

问题描述

我想要图片下方的轮播指示器。这需要一些样式更改仍然使用此轮播的引导（请参阅下面的完整代码）。我添加了 border-color 到指标，我添加了一些样式到 carousel-indicators class： position：static; padding-top：10px; width：100％; margin-left：0; 。

问题是指标的大小。如果访问者单击其中一个指示器，则轮播会正确转到该图像。 但是，指标不会改变：也就是说，以活动开头的指标仍然大于其他两个指标（您现在可以期望点击的指示器是较大的）。第一个指标继续保持活动 类。可能是什么原因导致此问题？

 < div id =carouselvideoclass =carousel slidedata-ride =旋转木马> 
< div class =carousel-innerrole =listbox> 
< div class =item active> 
< iframe width =250height =250src =https://www.youtube-nocookie.com/embed/xxx></iframe> 
< / div> 
< div class =item> 
< iframe width =250height =250src =https://www.youtube-nocookie.com/embed/xxx> < / iframe> 
< / div> 
< div class =item> 
< iframe width =250height =250src =https://www.youtube-nocookie.com/embed/xxx></iframe> 
< / div> 
< / div> 
< / div> 
 
< script> //如果我删除此脚本，问题仍然存在
 $ #carouselvideo）。carousel（{interval：false}）; 
< / script> 
 
< ol class =carousel-indicatorsstyle =position：static; padding-top：10px; width：100％; margin-left：0;> 
< li data-target =＃carouselvideodata-slide-to =0style =border-color：＃333;class =active> ;< / li> 
< li data-target =＃carouselvideodata-slide-to =1style =border-color：＃333;>< / li> 
< li data-target =＃carouselvideodata-slide-to =2style =border-color：＃333;>< / li> 
< / ol> 
 





---

更新：移动 carouselvideo div中的最后五行，然后问题消失了，但我不想在那里，因为我想要的旋转木马下面的指标（见如何创建iframe的引导轮播？）。当指标代码放在轮播之外时，为什么会出现这个问题？

解决方案

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

 < div id =myCarouselclass =carousel slidedata -ride =carouseldata-interval =false> 
<！ - 指标 - > 
< ol class =carousel-indicators> 
< li data-target =＃myCarouseldata-slide-to =0class =active>< / li> 
< li data-target =＃myCarouseldata-slide-to =1>< / li> 
< li data-target =＃myCarouseldata-slide-to =2>< / li> 
< / ol> 
 
<！ - 幻灯片包装 - > 
< div class =carousel-innerrole =listbox> 
 
< div class =item active> 
< iframe width =100％height =250src =https://www.youtube-nocookie.com/embed/xxx>< / iframe> 
 
< / div><！ - 结束项目 - > 
 
< div class =item> 
< iframe width =100％height =250src =https://www.youtube-nocookie.com/embed/xxx>< / iframe> 
 
< / div><！ - 结束项目 - > 
 
< div class =item> 
< iframe width =100％height =250src =https://www.youtube-nocookie.com/embed/xxx>< / iframe> 
 
< / div><！ - 结束项目 - > 
< / div><！ -  End Carousel Inner  - > 
<！ - 控件 - > 
< a class =left carousel-controlhref =＃myCarouseldata-slide =prev> 
< span class =glyphicon glyphicon-chevron-left>< / span> 
< / a> 
< a class =right carousel-controlhref =＃myCarouseldata-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> 
  

I wanted the carousel-indicators below the images. This required some styling changes to still use Bootstrap for this carousel (see full code below). I added the border-color to the indicators and I added a bit of styling to the carousel-indicators class: position:static; padding-top:10px; width: 100%; margin-left:0;.

The problem is the size of the indicators. If a visitor clicks one of the indicators, the carousel correctly goes to that image. However, the indicators don't change: that is, the indicator that started as active is still larger than the other two indicators (you would now expect the clicked indicator to be the larger one). The first indicator continues to keep the active class. What could be causing this problem?

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

---

Update: If I move the last five lines inside the carouselvideo div, then the problem is gone. However, I dont wan't it there because I want the indicators below the carousel (see How to create this bootstrap carousel of iframes?). Why would this problem exist when the indicators code is placed outside the carousel?

解决方案

Here is a working example of a bootstrap carousel and the indicators work just fine. You are missing some quotes at the end of your iframe src and this may be causing some issues but you can find a working example at this fiddle http://jsfiddle.net/wamosjk/auotu240/ and here is the code

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

you can take out the script and just put data-interval="false" in your carousel as well but it is up to you if you are still having issues then there is some more than likely some previously stated css or javascript issues. You may take out the controls if you dont want them and just keep the indicators.

I found that if you want the indicators outside of the carousel the active class no longer toggles so you would need to add the following script

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

这篇关于引导轮播：轮播指示器不改变大小/类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！