IT技术 - Bootstrap Carousel：删除自动幻灯片 - 吾爱随笔录

IT技术 javascript jquery twitter-bootstrap

2021-03-18 13:24:57

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

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

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

6个回答

您可以通过 js 或 html (easist) 两种方式执行此操作

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

这将使自动滑动停止，因为没有添加毫秒，并且永远不会滑动。

<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"

2021-04-29 13:24:57

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

2021-05-03 13:24:57

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

2021-05-18 13:24:57

间隔自动循环项目之间的延迟时间。如果为false，carousel 将不会自动循环。

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

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

2021-05-02 13:24:57

对于简单的情况，这确实要简单得多，但请记住，使用您的自定义scripts.js并在 html 中不保留脚本编码是一个更好的设计！;)

2021-05-08 13:24:57

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

2021-05-18 13:24:57

这对我不起作用 <div class="carousel slide" data-ride="carousel" id="carousel-ex" data-interval="false"> <div class="carousel-inner" >....什么都没有......仍然自动滑动

2021-05-21 13:24:57

您只需要在 DIV 标签中再添加一个属性，即

data-interval="false"

无需接触JS！

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

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

请尝试以下操作：

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

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

2021-05-04 13:24:57

其它你可能感兴趣的问题