如何将多个选项传递给 Firefox 中引导轮播的可选选项对象？

Posted 2023-05-08

【中文标题】如何将多个选项传递给 Firefox 中引导轮播的可选选项对象？

【英文标题】：How to pass multiple options to bootstrap carousel's optional options object in Firefox?

【发布时间】：2017-03-16 23:53:42

【问题描述】：

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

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

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

为什么即使将pause 设置为hover 后，轮播也不会停止循环。 据说pause的默认值是hover那为什么轮播默认hover时不停止循环呢？如果轮播默认情况下在悬停时无法通过，我为什么还要使用 null 代替 pause？

注意：此错误仅出现在 firefox 浏览器中。在 chrome 中，轮播会在悬停时暂停。

【问题讨论】：

你的代码应该可以工作，确保轮播前面没有任何东西可以阻止悬停:)

你应该选择 id 的轮播：$('#carousel')

@jogoe 不。没有任何东西遮住旋转木马。以下内容会在悬停时暂停轮播，但不会在 mouseleave $('.carousel').hover(function() $('.carousel').carousel('pause'); );

上运行它

【参考方案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"   >
      </div>

      <div class="item">
        <img class="width90" src="img/2.jpg"   >
      </div>

      <div class="item">
        <img class="width90" src="img/3.jpg"   >
      </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>

【讨论】：

是的，我已经尝试过并且知道它有效。但我的问题是：Bootstrap 官方页面在技术上说将pause 设置为hover 应该有效吗？

您使用的是最新的引导程序版本吗？问题是否在多个浏览器上出现？我最近实现了一个轮播，事实上，当我将鼠标悬停在它上面时，它默认会暂停。

有趣。在 chrome 上它工作正常，但在 Firefox 中不行。是的，我正在使用引导程序 3.3.7。

根据您的回答，我重新检查了为 (koopensteun.be) 实施轮播的网站，它似乎在 Firefox 中也能正常工作。我用完整的工作代码更新了我的答案

我刚刚重新启动了 Firefox，它只是 *king 工作了！感谢您的帮助。