Bootstrap Carousel：删除自动幻灯片

Posted 2023-02-22

【中文标题】Bootstrap Carousel：删除自动幻灯片

【英文标题】：Bootstrap Carousel : Remove auto slide

【发布时间】：2013-02-05 07:25:07

【问题描述】：

我正在使用引导轮播。我想要的是滑块只会在单击导航或分页时滑动。 我试过删除

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

它工作正常，但我的问题是一旦我已经点击了导航或分页，它现在是自动滑动的。是否可以取消自动滑动功能？如果是这样，怎么做？

【参考方案1】：

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

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

【参考方案2】：

您可以通过 js 或 html（简单）两种方式完成此操作

通过js

$('.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 的评论更新

【讨论】：

去掉data-ride="carousel" ...和正确的内联语法：data-interval="false"

知道使用react-bootstrap时如何停止轮播吗？

现在是data-bs-interval="false"

【参考方案3】：

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

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

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

通过使用上述脚本，auto-rotation 将被阻止，因为interval 是false

【参考方案4】：

更改/添加到轮播 div 上的 data-interval="false"

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

【参考方案5】：

请尝试以下方法：

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

【讨论】：

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

【参考方案6】：

data-interval="假"

把这个添加到对应的div中...

【参考方案7】：

你只需要在你的 DIV 标签中再添加一个属性

data-interval="false"

无需接触 JS！

【参考方案8】：

来自official docs：

interval 自动循环项目之间的延迟时间。 如果false，轮播将不会自动循环。

您可以使用 javascript 或使用 data-interval="false" 属性传递此值。

【讨论】：

感谢 data-interval='false'，如果您在 Wordpress 中使用 the-bootstrap 主题，这是一个简单的选择

data-interval="false" 是更好的解决方案，无需触摸引导 JS！

这对我不起作用 .... 什么都没有...仍然自动滑动 这对于简单的情况确实要简单得多，但请记住使用自定义scripts.js 并且在html 中不保留任何脚本编码是一个更好的设计！ ;)