我的网站上有一个用Twitter Bootstrap创建的旋转木马。我不确定为什么它不会自动启动,但是当页面加载时,它不会启动,直到你单击箭头前进到下一张幻灯片,然后定时器才会启动。从引导程序文档中它说它可以初始化有这个对象,但我把它放在哪里?
$('.carousel').carousel({
interval: 2000
})
我的网站有两个javascript文件,jquery-1.7.2.min.js和bootstrap.min.js。
答案 0 :(得分:34)
假设您已准备好其他所有内容,请尝试在结束正文标记之前添加此内容:
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 2000
})
});
</script>
答案 1 :(得分:9)
我有同样的问题并找到了解决方案; 因为我们都将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/
答案 2 :(得分:8)
以为我会添加一些关于bootstrap 3工作的内容。
根据您在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>
答案 3 :(得分:3)
我遇到了同样的问题所以我发现我错过了bootstrap caruosel的data-ride="carousel"
。在你的代码中检查一下。 Link to Bootstrap doc
答案 4 :(得分:2)
不需要任何javascript代码,您可以使用数据属性data-interval="1000"
将其设置为自动更改
自动循环项目之间的延迟时间。如果 假,轮播不会自动循环。
<div id="carousel-example-generic" class="carousel slide" data-interval="1000" data-ride="carousel">
答案 5 :(得分:1)
我已经在这上面坐了好几个月了,每次我预编译资产有些错误都会进入资产公共/文件夹,所以有些事情没有用。我需要将旧资产复制到public / assets文件夹中以使其正常工作。很长一段时间,我试图找出进口必须遵循的顺序,以及哪些要求声明正在摧毁已有的工作。
我的解决方案毕竟是,我需要导入这些:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
并且不要放置脚本,例如一个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工作正常。注意:它应该是 应用程序include_tag其他我无法工作。
注意事项2:我也有一个googlemaps脚本,但它只是(!)导入到地图所在的文件中。这是这个剧本:
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>
我真的希望这有助于其他人节省时间。有些事情并不那么明显。
答案 6 :(得分:0)
这件事发生在我身上。但是 - 有一个暂停的选项:&#39; hover&#39;这是默认设置。
此选项使我的全屏滑块停止,即使在第一张幻灯片上也是如此;) 所以请设置你暂停到假或其他什么而不是“徘徊”。
答案 7 :(得分:0)
只是为那些正在使用反应的人添加,执行以下操作将触发循环:
componentDidMount(){
this.setState({activeIndex:0})
}