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

Is it possible to prevent the Bootstrap carousel pause on mouse hover and continue automatically cycling?

本文关键字：暂停 悬停 继续 循环 鼠标 是否      更新时间：2023-09-26

是否可以防止引导轮播在鼠标悬停行为时暂停并继续自动循环浏览项目？

文档只提到了pause: "hover"的默认行为，如果我将 pause 参数更改为其他任何内容，那么轮播将完全停止工作，所以我不确定如何禁用此默认行为。

我发现值 "false" 会导致轮播在鼠标悬停期间保持循环：

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

我正在使用 Twitter Bootstrap v2.0.2

您也可以

将其添加到div .carousel中，而不是使用javascript。

添加延迟时间：

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'
    })

对于引导程序 v3.3.4

for Bootstrap v5.1

data-bs-pause="false"

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

引导程序 4 删除悬停时的暂停

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

对于仍在访问此线程的任何人，在最新版本的 4.1.3 中，请使用不带引号的 null。也许在以前的 v.4 版本中需要引号，但现在不是这样：

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

在引导 4 中：

数据暂停="假"

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

此设置可防止暂停。

我发现这种循环和暂停取决于两件事。

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

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

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

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

利用数据属性并将选项名称附加到data-bs- 。对于这种情况，它应该是 data-bs-pause="false" .

相关文章：