logo标签列表

在 Bootstrap 轮播中，是否可以防止鼠标悬停时暂停并继续自动循环？

javascripthovertwitter-bootstrap
57

如何防止Bootstrap轮播（carousel）在鼠标悬停时暂停并继续自动循环浏览项目？

文档仅提到了pause： "hover"的默认行为，如果我将暂停参数更改为其他任何内容，则轮播完全停止工作，因此我不确定如何禁用此默认行为。

10个回答
94

我发现把值设为"false"会导致轮播在鼠标悬停时继续循环：

$('.carousel').carousel({
    pause: "false"
});

我正在使用 Twitter Bootstrap v2.0.2

5
为了兼容IE，请将用户的"pause":"false"更改为"pause":false。 - Gustav
1
也适用于Bootstrap v3.1.1！ - HischT
65

您可以将此添加到

中，而不是使用JavaScript。

添加延迟时间：

data-interval="3000"

添加暂停时是否悬停，选项为true和false

data-pause="false"

示例：

<div id="carousel" class="carousel" data-ride="carousel" data-interval="3000" data-pause="false">

这对我起作用了。

这是一个非常好的工作解决方案，我已经在Safari和Chrome上尝试了Bootstrap 4。感谢您提供的解决方案！ - Wasantha Wijayaratna
这是一个很棒的工作解决方案，我已经在Safari和Chrome上使用Bootstrap 4尝试过了。感谢您提供的解决方案！ - Wasantha Wijayaratna
1
在较新的Bootstrap版本中，您可能需要使用"data-bs-..." - blandaadrian
7
$('.carousel').carousel({
        pause: 'none'
    })

适用于Bootstrap v3.3.4

2
一些解释会让这个例子变得更好。 - Thom
对于Bootstrap 3.3.7，该值应为“null”：http://getbootstrap.com/javascript/#carousel-options - Victor BV
6

适用于Bootstrap v5.1

data-bs-pause="false"

例如：<div class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">

该代码段是设置一个轮播图，其中class为"carousel slide"，data-bs-ride用于指定轮播方式并设置自动播放，data-bs-pause则用于设置当鼠标悬停在轮播图上时是否暂停播放。

额外的“-bs-”对我很有帮助 - 很明显这在某个Bootstrap版本中发生了变化，谢谢！ - blandaadrian
2

如果您仍在查看此线程，则在最新版本的4.1.3中，使用null而不需要引号。可能在以前的v.4版本中需要引号，但现在不需要了：

$('.carousel').carousel({
    interval: 2000,
    cycle: true,
    pause: null
})
2
在Bootstrap 4中:

data-pause="false"

例如：<div class="carousel slide" id="carousel" data-pause="false" data-ride="carousel"> 该设置可防止暂停。
2

Bootstrap 4 鼠标悬停时取消暂停

$('.carousel').carousel({
    interval: 2000,
    cycle: true,
    pause: "null"
})
0

我发现这个轮播和暂停的依赖有两个方面：

  1. 当鼠标进入时（mouseenter - 暂停滑动）
  2. 当鼠标离开时（mouseleave - 恢复滑动）

只需更改js/bootstrap.js文件中以下代码行，即可允许连续滑动。

.on('mouseenter', $.proxy(this.pause, this)) 更改为

.on('mouseenter', $.proxy(this.**cycle**, this))

编辑源文件是一个糟糕的想法。如果您选择升级，所有更改都将丢失。此外，许多开发人员选择使用外部托管的文件（例如托管在bootstrapcdn.com上的文件），甚至无法更改。此外，当您更改整个网站的源文件时，可能会在其他页面上获得意外结果。 - JerkMan
0

利用数据属性并将选项名称附加到 data-bs-。 对于此情况，应为 data-bs-pause="false"。

0
<Carousel pause="false" interval={5000}>
    <Carousel.Item>
        <img className="d-block w-100" src="..." alt="First slide" />
        </Carousel.Item>
        <Carousel.Item>
        <img className="d-block w-100" src="..." alt="Second slide" />
    </Carousel.Item>
</Carousel>

这是给React的。
1
你的回答目前写得不够清楚。请编辑并添加更多细节，以帮助他人理解这如何回答所提出的问题。你可以在帮助中心找到更多关于如何撰写好回答的信息。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接