自举旋转木马: 删除自动幻灯片

我在用自助旋转木马。我想要的是，滑块将只有当导航或分页被单击幻灯片。 我试过移除

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

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

295676 次浏览
小开
最佳答案

你可以通过 js 或者 html (easist)这样做

  1. 通过 js
$('.carousel').carousel({
interval: false,
});

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

  1. 通过添加 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 的评论更新

小开

来自 官方文件:

间隔 自动循环一个项目之间的延迟时间。 < em > 如果 假的，carousel 将不会自动循环。

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

小开

您只需要向 DIV 标记添加一个属性，即

data-interval="false"

不要碰 JS！

小开

Data-time = “ false”

把这个加到对应的 div..。

小开

请尝试以下方法:

<script>
$(document).ready(function() {
$('.carousel').carousel('pause');
});
</script>
小开 
$(document).ready(function() {
$('#media').carousel({
pause: true,
interval: 40000,
});
});

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

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

通过使用上面的脚本，auto-rotation将被阻塞，因为 interval是 false

小开

在 carousel div 上更改/添加到 data-time = “ false”

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

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

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

提交答案