Javascript Twitter Bootstrap Carousel 在加载时自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13525258/
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
Twitter Bootstrap Carousel autoplay on load
提问by Dan
Using the twitter bootstrap framework, how is it possible to invoke the carousel to 'auto slide.' Meaning when the page loads, the carousel automatically scrolls.
使用 twitter bootstrap 框架，如何调用轮播来“自动滑动”。这意味着当页面加载时，轮播会自动滚动。
I have tried a javascript onLoad click function for the <a>of the next link, but this didn't work.
我已经为<a>下一个链接的 的尝试了 javascript onLoad 单击功能，但这没有用。
回答by itsme
you should do as the Twitter Bootstrap Documentationsays about Carousel, so set the first Carousel slide item with class="active"and initialize the js for the carousel in this way:
您应该按照Twitter Bootstrap 文档中关于 Carousel 的说明进行操作，因此将第一个 Carousel 幻灯片项设置为class="active"并以这种方式为 carousel 初始化 js：
$(function(){
$('.carousel').carousel({
interval: 2000
});
});
then if it's not enough (but this never happened to me) use the bruteforce triggering the click hover the carousel control buttons like this:
然后，如果这还不够（但这从未发生在我身上）使用蛮力触发点击悬停轮播控制按钮，如下所示：
$(function(){
$('.carousel').carousel({
interval: 2000
});
$('.carousel-control.right').trigger('click');
});
but this is just a not-needed trick, really, just follow the documentantion!
但这只是一个不需要的技巧，真的，只需按照文档说明即可！
回答by Dan
Simple. You're missing the "data-ride" attribute in the div.
简单的。您缺少 div 中的“data-ride”属性。
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
回答by merv
As per the docs, you need to initialize the Carousel plugin via JavaScript. The carousel example on the official Bootstrap documentation page is initialized in the application.jsfile on lines 67-68:
根据文档，您需要通过 JavaScript 初始化 Carousel 插件。官方 Bootstrap 文档页面上的轮播示例在application.js文件中的第 67-68 行初始化：
// carousel demo
$('#myCarousel').carousel()
which gives it the default settings.
这给了它默认设置。
If you want to specify the cycle interval, you can set the intervalproperty in milliseconds:
如果要指定循环间隔，可以设置interval以毫秒为单位的属性：
$('.carousel').carousel({
interval: 2000
})
回答by Panuwizzle
Put it in the document-ready-block make it auto-start for me
将它放在文档就绪块中，让它为我自动启动
$(document).ready(function() {
$('#myCarousel').carousel();
});
回答by Grateful developer
<div id="myCarousel" class="carousel slide" data-ride="carousel">works for me, what I have been missing was the data-ride attribute.
<div id="myCarousel" class="carousel slide" data-ride="carousel">对我有用，我一直缺少的是 data-ride 属性。
I hope this will help a lot of people. Thank you stackoverflow, you have been very useful to me on most grounds. Am glad this community exists.
我希望这会帮助很多人。谢谢stackoverflow，在大多数情况下你对我都非常有用。很高兴这个社区存在。
回答by Milox
You can use the data-intervalattribute on the html markup to auto play:
您可以使用html 标记上的data-interval属性来自动播放：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
data-interval: The amount of time in milliseconds to delay between automatically cycling an item. If false, carousel will not automatically cycle.
data-interval：自动循环项目之间延迟的时间量（以毫秒为单位）。如果为 false，carousel 将不会自动循环。
回答by Николай Шеломенцев
<header id="myCarousel" class="carousel slide">
YOU NEED ADD
你需要添加
data-ride="carousel"
<header id="myCarousel" class="carousel slide" data-ride="carousel">
回答by 2567910
Just add data-interval="5000"to the divwith the IP carouselExampleIndicators.
只需添加data-interval="5000"到div带有 IP 的carouselExampleIndicators.
Like this:
像这样：
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="5000">
回答by FooBar
For Bootstrap 4 and onwards:
对于 Bootstrap 4 及更高版本：
$(function(){
$('.carousel').carousel({
interval: 2000,
ride: 'carousel' // this is the important part
});
});
回答by Ben
Simply add the class "slide" to the carousel div tag, like this:
只需将类“幻灯片”添加到轮播 div 标签中，如下所示：
<div class="carousel slide" id="this-carousel-id">
