如何在 Bootstrap Carousel 中使用数据暂停属性

Posted 2023-05-08

【中文标题】如何在 Bootstrap Carousel 中使用数据暂停属性

【英文标题】：How to use data-pause attribute in Bootstrap Carousel

【发布时间】：2013-07-05 14:14:31

【问题描述】：

在 Bootstrap 轮播中，我想使用数据属性禁用鼠标悬停暂停。我也在尝试设置数据间隔，但两者都不起作用。但是它使用 javascript 工作，但我想通过使用数据属性来使用它。

选项可以通过数据属性或 JavaScriptz 传递。对于数据 属性，将选项名称附加到 data-，如 data-interval=""

来自 Bootstrap 官方网站。

提前致谢。 JavaScript -

<script type="text/javascript">
$(function()
     $("#myCarousel").carousel();
);
</script>

html -

<div class="container">
    <div id="myCarousel" class="carousel slide" data-interval="2000" data-pause="false">
    <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>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" ></div>
    <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" ></div>
    <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" ></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

【问题讨论】：

你能贴出你试过的代码吗？

你试过data-pause=""吗？根据twitter.github.io/bootstrap/javascript.html#carousel默认为data-pause="hover"

抱歉耽搁了。我试过 data-pause=""，但没用。

【参考方案1】：

把这个放到整个轮播的div中

<div id="myCarousel" class="carousel" data-pause="false">

【参考方案2】：

这有点晚了，但我认为这可能对其他人有益。我相信问题是因为您试图将数据属性与 JavaScript 混合。不要将 pause 选项添加为数据属性，而是在调用 carousel 函数时添加它：

$(function()
     $("#myCarousel").carousel(
          pause: false
     );
);

您可能还必须使用区间数据属性。