[英]Bootstrap Carousel : Remove auto slide
I'm using Bootstrap Carousel.我正在使用 Bootstrap 轮播。 All I want is that the slider will only slide when a navigation or a pagination is clicked.
我想要的只是 slider 只会在单击导航或分页时滑动。 I've tried removing
我试过删除
$('.carousel').carousel({
interval: 6000
});
It works fine but my problem is once I've already clicked a navigation or pagination, it is now auto sliding.它工作正常,但我的问题是一旦我已经点击了导航或分页,它现在会自动滑动。 Is it possible to remove the auto sliding function?
是否可以删除自动滑动 function? If so, how?
如果是这样,如何?
You can do this 2 ways, via js or html (easist)您可以通过 js 或 html (easist) 两种方式执行此操作
$('.carousel').carousel({
interval: false,
});
That will make the auto sliding stop because there no Milliseconds added and will never slider next.这将使自动滑动停止,因为没有添加毫秒,并且永远不会滑动。
data-interval="false"
and removing data-ride="carousel"
data-interval="false"
并删除data-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
becomes:变成:
<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">
updated based on @webMan's comment根据@webMan 的评论更新
From the official docs :来自官方文档:
interval The amount of time to delay between automatically cycling an item.
间隔自动循环项目之间的延迟时间。 If false , carousel will not automatically cycle.
如果为false ,carousel 不会自动循环。
You can either pass this value with javascript or using a data-interval="false"
attribute.您可以使用 javascript 或使用
data-interval="false"
属性传递此值。
You just need to add one more attribute to your DIV tag which is您只需要在 DIV 标签中再添加一个属性,即
data-interval="false"
no need to touch JS!无需接触JS!
在轮播 div 上更改/添加到 data-interval="false"
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">
Please try the following:请尝试以下操作:
<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">
data-interval="false"数据间隔=“假”
Add this to the corresponding div ...将此添加到相应的div ...
$(document).ready(function() {
$('#media').carousel({
pause: true,
interval: 40000,
});
});
By using the above script, you will be able to move the images automaticaly通过使用上面的脚本,您将能够自动移动图像
$(document).ready(function() {
$('#media').carousel({
pause: true,
interval: false,
});
});
By using the above script, auto-rotation
will be blocked because interval
is false
通过使用上面的脚本,
auto-rotation
将被阻止,因为interval
为false
Omitting the data-bs-ride may work.省略data-bs-ride可能会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.