如何在Firefox中将多个选项传递给bootstrap carousel的可选选项对象?

时间:2016-11-03 11:51:58

标签: javascript jquery html twitter-bootstrap carousel

我一直在研究他们official site的Bootstrap轮播。他们建议在mouseenter事件集pause"hover"暂停轮播循环。我也想将骑行速度改为1秒,所以我尝试了这个:

$('.carousel').carousel({
    pause: "hover",
    interval: 1000        
 })

它将循环速度设置为1秒,但旋转木马仍然不会停留在它上面。所以我的问题是:

  1. 为什么即使将pause设置为hover,轮播也不会停止循环。
  2. 据说pause的默认值是hover那么为什么默认情况下旋转木马不会在悬停时停止循环?如果轮播在默认情况下默认情况下无法通过,为什么我会将null用于pause
  3. 注意:此错误仅出现在firefox浏览器中。在镀铬中,旋转木马在悬停时暂停。

1 个答案:

答案 0 :(得分:1)

你试过这个:

$('#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>