我一直在研究他们的 official site 的 Bootstrap 轮播。他们建议在 mouseenter 事件集 pause
上暂停轮播的循环至"hover"
。我还想将循环速度更改为 1 秒,所以我尝试了以下方法:
$('.carousel').carousel({
pause: "hover",
interval: 1000
})
它将循环速度设置为 1 秒,但旋转木马在悬停在其上时仍然没有停止。所以我的问题是:
- 为何设置
pause
后轮播仍不停止循环至hover
。 - 据说默认值
pause
是hover
那么为什么轮播默认情况下不会在悬停时停止循环呢?为什么我要使用null
对于pause
如果默认情况下轮播在悬停时无法通过?
注意:此错误仅出现在 Firefox 浏览器中。在 Chrome 中,轮播会在悬停时暂停。
最佳答案
你尝试过这个吗:
$('#myCarousel').hover(function () {
$(this).carousel('pause');
}, function () {
$(this).carousel('cycle');
});
如下所示:https://github.com/twbs/bootstrap/issues/1048
编辑:我在 https://www.koopensteun.be 上实现了一个完全工作的轮播,代码:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="width90" src="img/1.jpg" alt="Gratis het goede doel steunen! Hoe kan dat?" width="460" height="345">
</div>
<div class="item">
<img class="width90" src="img/2.jpg" alt="Na aankoop bedanken de webshops op Koop&Steun ons voor de reclame" width="460" height="345">
</div>
<div class="item">
<img class="width90" src="img/3.jpg" alt="Wij storten deze bijdrage door naar jouw favoriete goede doel of vereniging!" width="460" height="345">
</div>
</div>
<!-- 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>
</div>
关于javascript - 如何在 Firefox 中将多个选项传递给 bootstrap carousel 的 optional 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40400787/