![](/img/trans.png)
[英]How to differentiate between auto-slide and click slide Bootstrap carousel?
[英]Bootstrap Carousel : Remove auto slide
我正在使用 Bootstrap 轮播。 我想要的只是 slider 只会在单击导航或分页时滑动。 我试过删除
$('.carousel').carousel({
interval: 6000
});
它工作正常,但我的问题是一旦我已经点击了导航或分页,它现在会自动滑动。 是否可以删除自动滑动 function? 如果是这样,如何?
您可以通过 js 或 html (easist) 两种方式执行此操作
$('.carousel').carousel({
interval: false,
});
这将使自动滑动停止,因为没有添加毫秒,并且永远不会滑动。
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 的评论更新
来自官方文档:
间隔自动循环项目之间的延迟时间。 如果为false ,carousel 不会自动循环。
您可以使用 javascript 或使用data-interval="false"
属性传递此值。
您只需要在 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>
在 Bootstrap v5 中使用: data-bs-interval="false"
<div id="carouselExampleCaptions" class="carousel" data-bs-ride="carousel" data-bs-interval="false">
数据间隔=“假”
将此添加到相应的div ...
$(document).ready(function() {
$('#media').carousel({
pause: true,
interval: 40000,
});
});
通过使用上面的脚本,您将能够自动移动图像
$(document).ready(function() {
$('#media').carousel({
pause: true,
interval: false,
});
});
通过使用上面的脚本, auto-rotation
将被阻止,因为interval
为false
省略data-bs-ride可能会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.