twitter-bootstrap Twitter Bootstrap Carousel 不会自动启动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17114094/
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 not automatically starting
提问by Jashua
I have a carousel on my site that was created with Twitter Bootstrap. I'm not sure why it does not start automatically though when the page loads, it does not initiate until you click on the arrow to advance to the next slide, then the timer kicks in. From the bootstrap documentation it says it can be initialised with this object, but where do i put this?
我的网站上有一个使用 Twitter Bootstrap 创建的轮播。我不确定为什么它不会自动启动，但当页面加载时，它不会启动，直到您单击箭头前进到下一张幻灯片，然后计时器启动。从引导程序文档中它说它可以被初始化有了这个对象，但我把它放在哪里？
$('.carousel').carousel({
interval: 2000
})
My site has two javascript files, jquery-1.7.2.min.js, and bootstrap.min.js.
我的站点有两个 javascript 文件，jquery-1.7.2.min.js 和 bootstrap.min.js。
回答by David Taiaroa
Assuming you have everything else in place, try adding this before the closing body tag:
假设您已准备好其他所有内容，请尝试在结束正文标记之前添加以下内容：
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 2000
})
});
</script>
回答by Mujahidul Jahid
I had your same problem and found the solution; As we both put the javascripts at the end of the page, the calling of the function must be put after them:
我遇到了同样的问题并找到了解决方案；由于我们都将 javascripts 放在页面的末尾，因此函数的调用必须放在它们之后：
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function() {
$('#myCarousel').carousel({ interval: 3000, cycle: true });
});
</script>
http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/
http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/
回答by kronus
Thought I would add something about bootstrap 3 working in angular.
以为我会添加一些关于以 angular 工作的 bootstrap 3 的内容。
Depending on how extensive your application is within Angular, there could be a slight delay in when the carousel loads. For instance, I have the carousel loading as a template, which loads slightly after the document loads, so therefore, I had to add a slight timeout for the code to kick start the carousel.
根据您的应用程序在 Angular 中的广泛程度，轮播加载时可能会有轻微的延迟。例如，我将轮播加载作为模板，在文档加载后稍微加载，因此，我不得不为代码添加一个轻微的超时以启动轮播。
<div class="mWeb-container" ng-controller="mWebCtrl">
<div ng-include="nav_tpl" ng-hide="print_layout"></div>
<div ng-include="carousel_tpl" ng-hide="print_layout"></div>
<div ng-include="breadcrumbs_tpl" ng-hide="print_layout"></div>
<div ng-view=""></div>
<div ng-include="comments_tpl" ng-hide="print_layout"></div>
<div ng-include="footer_tpl" ng-hide="print_layout"></div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="angular/scripts/vendor/bootstrap.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var mCarouselTO = setTimeout(function(){
$('#Carousel').carousel({
interval: 3000,
cycle: true,
}).trigger('slide');
}, 2000);
var q = mCarouselTO;
});
-->
</script>
回答by Ali Madadi
I had the same problem so I found that I missed the data-ride="carousel"from the bootstrap caruosel. Check that in your code. Link to Bootstrap doc
我遇到了同样的问题，所以我发现我错过data-ride="carousel"了引导轮播。在您的代码中检查。 链接到 Bootstrap 文档
回答by John Magnolia
No need for any javascript code, you can set it to auto change using data attribute data-interval="1000"
不需要任何javascript代码，您可以使用数据属性将其设置为自动更改 data-interval="1000"
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
自动循环项目之间的延迟时间。如果为 false，carousel 将不会自动循环。
<div id="carousel-example-generic" class="carousel slide" data-interval="1000" data-ride="carousel">
回答by Linus
I've been sitting for months on this, every time I precompiled the assets something wrong went into the assets public/folder so something wasn't working. I needed to copy old assets into the public/assets folder to get it working. For a long time I tried to figure out in which order the imports have to be and which require statements are destroying already working things.
我已经坐了几个月了，每次我预编译资产时，都会有一些错误进入资产公共/文件夹，所以有些东西不起作用。我需要将旧资产复制到 public/assets 文件夹中才能使其正常工作。很长一段时间以来，我试图弄清楚导入的顺序以及哪些 require 语句正在破坏已经工作的东西。
My solution after all this time is, I need to import these:
毕竟我的解决方案是，我需要导入这些：
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
And don't ever put a script, e.g. a start-carousel-script into the application.js file. If I place it into the application.html.erb file like this:
并且永远不要将脚本（例如 start-carousel-script）放入 application.js 文件中。如果我将它放入 application.html.erb 文件中，如下所示：
<%= javascript_include_tag "application" %>
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 3000
})
});
</script>
Everthing works fine. Notice: it hat to be underthe application include_tag otherwhise I can't work.
一切正常。注意：它必须在应用程序 include_tag下，否则我无法工作。
Notice 2: I've got a googlemaps script as well, but it's only(!) imported in the file where the map lives. It's this script:
注意 2：我也有一个 googlemaps 脚本，但它只是（！）导入到地图所在的文件中。这是这个脚本：
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>
I really hope this helps other people save their time. There are some things that aren't that obvious.
我真的希望这可以帮助其他人节省时间。有些事情不是那么明显。
回答by Martin Klasson
This happened to me to. But - there is an option that is pause: 'hover' which is the default setting.
这发生在我身上。但是 - 有一个选项是暂停：'hover' 这是默认设置。
And this option made my fullscreen slider to stop of course, even on the first slide ;) So please set you pause to false or something else than 'hover'.
这个选项当然让我的全屏滑块停止，即使在第一张幻灯片上也是如此；) 所以请把你的暂停设置为 false 或除“悬停”以外的其他内容。
回答by TacoEater
Just to add for those of you who are using react, doing the following will trigger the cycle:
只是为那些使用 react 的人补充一下，执行以下操作将触发循环：
componentDidMount(){
this.setState({activeIndex:0})
}
