我想要图像下面的旋转木马指示器。这需要一些样式更改仍然使用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>
更新:如果我移动carouselvideo
div中的最后五行,则问题就消失了。但是,我不想在那里,因为我想要旋转木马下面的指标(见How to create this bootstrap carousel of iframes?)。当指标代码放在轮播之外时,为什么会出现这个问题?
答案 0 :(得分: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>