Javascript Bootstrap Carousel：删除自动幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14977392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Carousel : Remove auto slide
提问by kpamar06
I'm using Bootstrap Carousel. All I want is that the slider will only slide when a navigation or a pagination is clicked. I've tried removing
我正在使用 Bootstrap 轮播。我想要的是滑块只会在单击导航或分页时滑动。我试过删除
$('.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? If so, how?
它工作正常，但我的问题是一旦我已经点击了导航或分页，它现在会自动滑动。是否可以取消自动滑动功能？如果是这样，如何？
回答by Iliya Reyzis
You can do this 2 ways, via js or html (easist)
您可以通过 js 或 html (easist) 两种方式执行此操作
- Via js
- 通过js
$('.carousel').carousel({
interval: false,
});
That will make the auto sliding stop because there no Milliseconds added and will never slider next.
这将使自动滑动停止，因为没有添加毫秒，并且永远不会滑动。
- Via HtmlBy adding
interval="false"and removingdata-ride="carousel"
- 通过 Html通过添加
interval="false"和删除data-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
becomes:
变成：
<div id="carouselExampleCaptions" class="carousel slide" interval="false">
updated based on @webMan's comment
根据@webMan 的评论更新
回答by Diego Agulló
From the official docs:
来自官方文档：
intervalThe 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"属性传递此值。
回答by Nikunj Dhimar
You just need to add one more attribute to your DIV tag which is
您只需要在 DIV 标签中再添加一个属性，即
data-interval="false"
no need to touch JS!
无需接触JS！
回答by Arun
Change/Add to data-interval="false" on carousel div
在轮播 div 上更改/添加到 data-interval="false"
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">
回答by Nikit Barochiya
Please try the following:
请尝试以下操作：
<script>
$(document).ready(function() {
$('.carousel').carousel('pause');
});
</script>
回答by Nikit Barochiya
data-interval="false"
数据间隔=“假”
Add this to the corresponding div ...
将此添加到相应的div ...
回答by Nitin Anvekar
$(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-rotationwill be blocked because intervalis false
通过使用上面的脚本，auto-rotation将被阻止，因为interval是false
