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

时间:2012-04-22 12:29:28

标签: javascript hover twitter-bootstrap

是否可以阻止Bootstrap轮播暂停鼠标悬停行为并继续自动循环浏览项目?

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

7 个答案:

答案 0 :(得分:79)

我发现值"false"会导致轮播在鼠标悬停期间继续骑行:

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

我正在使用Twitter Bootstrap v2.0.2

答案 1 :(得分:46)

你也可以将它添加到div .carousel而不是使用javascript。

添加延迟时间:

data-interval="3000"

如果在悬停时暂停,则添加,选项为truefalse

data-pause="false"

示例是:

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

这对我有用。

答案 2 :(得分:7)

$('.carousel').carousel({
        pause: 'none'
    })

for Bootstrap v3.3.4

答案 3 :(得分:2)

Bootstrap 4在悬停时删除暂停

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

答案 4 :(得分:1)

对于仍在访问此线程的任何人,在4.1.3的最新版本中,请使用 null (不带引号)。也许在以前的v.4版本中需要引号,但现在情况并非如此:

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

答案 5 :(得分:1)

在 Bootstrap 4 中:

<块引用>

data-pause="false"

例如:<div class="carousel slide" id="carousel" data-pause="false" data-ride="carousel">

此设置可防止暂停。

答案 6 :(得分:0)

我发现这种骑行和暂停取决于两件事。

  1. 鼠标进入( mouseenter - 暂停滑动
  2. 鼠标离开时( mouseleave - 恢复滑动
  3. 只需更改js / bootstrap.js文件中的以下代码行即可继续滑动。

    .on('mouseenter', $.proxy(this.pause, this))

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