如何防止Bootstrap轮播(carousel)在鼠标悬停时暂停并继续自动循环浏览项目?
文档仅提到了pause: "hover"
的默认行为,如果我将暂停参数更改为其他任何内容,则轮播完全停止工作,因此我不确定如何禁用此默认行为。
如何防止Bootstrap轮播(carousel)在鼠标悬停时暂停并继续自动循环浏览项目?
文档仅提到了pause: "hover"
的默认行为,如果我将暂停参数更改为其他任何内容,则轮播完全停止工作,因此我不确定如何禁用此默认行为。
我发现把值设为"false"
会导致轮播在鼠标悬停时继续循环:
$('.carousel').carousel({
pause: "false"
});
我正在使用 Twitter Bootstrap v2.0.2
您可以将此添加到
添加延迟时间:
data-interval="3000"
添加暂停时是否悬停,选项为true
和false
data-pause="false"
示例:
<div id="carousel" class="carousel" data-ride="carousel" data-interval="3000" data-pause="false">
这对我起作用了。
$('.carousel').carousel({
pause: 'none'
})
适用于Bootstrap v3.3.4
适用于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则用于设置当鼠标悬停在轮播图上时是否暂停播放。
如果您仍在查看此线程,则在最新版本的4.1.3中,使用null而不需要引号。可能在以前的v.4版本中需要引号,但现在不需要了:
$('.carousel').carousel({
interval: 2000,
cycle: true,
pause: null
})
例如:data-pause="false"
<div class="carousel slide" id="carousel" data-pause="false" data-ride="carousel">
该设置可防止暂停。Bootstrap 4 鼠标悬停时取消暂停
$('.carousel').carousel({
interval: 2000,
cycle: true,
pause: "null"
})
我发现这个轮播和暂停的依赖有两个方面:
只需更改js/bootstrap.js文件中以下代码行,即可允许连续滑动。
.on('mouseenter', $.proxy(this.pause, this))
更改为
.on('mouseenter', $.proxy(this.**cycle**, this))
利用数据属性并将选项名称附加到 data-bs-
。 对于此情况,应为 data-bs-pause="false"
。
<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>
"pause":"false"
更改为"pause":false
。 - Gustav