Bootstrap 走马灯：去除自动滑动

Question

Bootstrap 走马灯：去除自动滑动

146

我正在使用Bootstrap轮播组件。我只想让滑块在点击导航或分页时才滑动。我尝试过删除

。

$('.carousel').carousel({
    interval: 6000
});

它运行得很好，但我的问题是一旦我已经点击导航或分页，它现在会自动滑动。有没有可能删除自动滑动功能？如果可以，该如何实现？

- khatzie

9个回答

116

来自官方文档：

interval 自动循环幻灯片之间的延迟时间。 如果为false，则不会自动循环。

您可以使用JavaScript传递此值，也可以使用data-interval="false"属性。

- Diego Agulló

9

感谢提供数据。如果您在WordPress中使用the-bootstrap主题，使用此选项将变得更加容易。 - toto_tico

35

data-interval="false"是更好的解决方案，无需触碰Bootstrap JS！ - lxg

4

这对我没有用。这是一个轮播幻灯片，id为"carousel-ex"，不断自动播放，但无论我怎么尝试，它仍然会自动播放，其中包含一个类名为"carousel-inner"的元素。 - Lachezar Raychev

这对于简单情况确实更简单，但请记住，在设计上使用自定义的 scripts.js 并在 HTML 中不保留脚本代码是更好的选择! ;) - cregox

61

你只需要为你的DIV标签添加一个属性，即：

data-interval="false"

不需要触及 JS！

- Nikunj Dhimar

40

在轮播div上更改/添加data-interval="false"属性

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">

- Arun

10

在Bootstrap v5中使用：data-bs-interval="false"

<div id="carouselExampleCaptions" class="carousel" data-bs-ride="carousel" data-bs-interval="false">

- Hiten Sharma

9

请尝试以下方法：

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

- Nikit Barochiya

2

这是唯一一个在运行时使用控制台与我一起工作的。 - Bishoy Hanna

4

将此代码添加到相应的div中：

data-interval="false"

- user6560814

4

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: 40000,
  });
});

通过使用上述脚本，您将能够自动移动图像。

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

通过使用上述脚本，因为间隔(interval)是false，所以将阻止自动旋转(auto-rotation)。

- Nitin Anvekar

-1

忽略 data-bs-ride 可能会起作用。

- Gil

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Iliya Reyzis · Accepted Answer

有两种方法可以做到这一点，通过js或html（最简单）

通过js

通过 JavaScript 方式

$('.carousel').carousel({
  interval: false,
});

因为没有添加毫秒，这将使自动幻灯片停止，并且永远不会滑动到下一张。

通过Html 通过添加data-interval="false"并移除data-ride="carousel"

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

变成：

<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">

基于 @webMan 评论的更新