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

svdrlsy4  于 2023-02-27  发布在  Bootstrap
关注(0)|答案(2)|浏览(134)

在Bootstrap carousel中,我想禁用鼠标悬停时使用数据属性的暂停,这是可能的。我也尝试设置数据间隔,但两者都不起作用。然而,它使用JavaScript工作,但我想使用它通过使用数据属性。
选项可以通过数据属性或JavaScript传递。对于数据属性,请将选项名称附加到data-,如data-interval="”

  • 来自Bootstrap官方网站。

提前感谢。JavaScript -

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

超文本标记语言-

<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" alt=""></div>
    <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""></div>
    <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""></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>
oxcyiej7

oxcyiej71#

将其放入整个转盘的div中

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

goqiplq22#

这有点晚了,但我认为它可能会使其他人受益。我认为问题是因为您试图将数据属性与JavaScript混合在一起。不要将pause选项作为数据属性添加,而是在调用carousel函数时添加它:

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

您可能还必须使用间隔数据属性来执行此操作。

相关问题