jQuery 防止 twitter bootstrap carousel 在页面加载时自动滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13358499/
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
Preventing twitter bootstrap carousel from auto sliding on page load
提问by Tepken Vannkorn
So is there anyway to prevent twitter bootstrap carousel from auto sliding on the page load unless the next or previous button is clicked?
那么，除非单击下一个或上一个按钮，否则是否可以防止 twitter bootstrap carousel 在页面加载时自动滑动？
Thanks
谢谢
回答by Michal Kopec
Or if you're using Bootstrap 3.0 you can stop the cycling with data-interval="false" for instance
或者，如果您使用的是 Bootstrap 3.0，则可以使用 data-interval="false" 停止循环
<div id="carousel-example-generic" class="carousel slide" data-interval="false">
<div id="carousel-example-generic" class="carousel slide" data-interval="false">
Other helpful carousel data attributes are here -> http://getbootstrap.com/javascript/#carousel-usage
其他有用的轮播数据属性在这里 -> http://getbootstrap.com/javascript/#carousel-usage
回答by Tepken Vannkorn
Actually, the problem is now solved. I added the 'pause' argument to the method 'carousel' like below:
事实上，现在问题已经解决了。我在方法 'carousel' 中添加了 'pause' 参数，如下所示：
$(document).ready(function() {
$('.carousel').carousel('pause');
});
Anyway, thanks so much @Yohn for your tips toward this solution.
无论如何，非常感谢@Yohn 为您提供有关此解决方案的提示。
回答by Srnux
The problem with carousel automatically sliding after prev/next button press is solved.
解决了按下上一个/下一个按钮后轮播自动滑动的问题。
$('.carousel').carousel({
pause: true,
interval: false
});
回答by marciocst
if you're using bootstrap 3set data-interval="false"on the HTML structure of carousel
如果你使用引导3组data-interval="false"在转盘的HTML结构
example:
例子：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
回答by Anil Ram
- Use
data-interval="false"to stop automatic slide - Use
data-wrap="false"to stop circular slide
- 使用
data-interval="false"可停止自动幻灯片 - 使用
data-wrap="false"停止环形滑
回答by Dylan B
add this to your coursel div :
将此添加到您的课程 div 中：
data-interval="false"
回答by Vikash Pandey
Below are the list of parameters for bootstrap carousel. Like Interval, pause, wrap:
下面是 bootstrap carousel 的参数列表。像间隔，暂停，换行：
For more details refer this link:
有关更多详细信息，请参阅此链接：
http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp
http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp
Hope this will help you :)
希望能帮到你 ：）
Note:This is for further help. I mean how you can customise or change default behaviour once carousel is loaded.
注意：这是为了进一步帮助。我的意思是如何在加载轮播后自定义或更改默认行为。
回答by Crabime
I think maybe you should go to check the official instruction about carousel, for me, i have not found answer above, because of multiple versions of bootstrap, I'm using b4-alpha and i want the autoplay effect stop.
我想也许你应该去查看关于轮播的官方说明，对我来说，我没有在上面找到答案，因为有多个版本的引导程序，我正在使用 b4-alpha 并且我希望自动播放效果停止。
$(document).ready({
pause:true,
interval:false
});
this script does not make any effect while mouse leave that page, exactly carousel area. go to official definition and find those :
当鼠标离开该页面时，此脚本不会产生任何影响，确切地说是轮播区域。转到官方定义并找到那些：
So you will find why.if carousel page onmouseover event triggered, page will pause, while mouse out of that page, it'll resume again.
所以你会发现为什么。如果触发了轮播页面 onmouseover 事件，页面将暂停，当鼠标移出该页面时，它将再次恢复。
So, if you want a page stop forever and rotate manually, you can just set data-interval='false'.
因此，如果您希望页面永远停止并手动旋转，您只需设置data-interval='false'.
回答by James
For Bootstrap 4 simply remove the 'data-ride="carousel"' from the carousel div. This removes auto play at load time.
对于 Bootstrap 4，只需从 carousel div 中删除 'data-ride="carousel"'。这会在加载时删除自动播放。
To enable the auto play again you would still have to use the "play" call in javascript.
要再次启用自动播放，您仍然必须使用 javascript 中的“播放”调用。
回答by Anil Kumar Ram
--Use data-interval="false" to stop automatic slide --Use data-wrap="false" to stop circular slide
--使用data-interval="false" 停止自动滑动 --使用data-wrap="false" 停止循环滑动
...