[英]Bootstrap Carousel controls not working
twitter bootstrap轮播无法正常工作。 我尝试将ID('#mycarousel')更改为.carousel或.mycarousel,但没有任何效果。 当我单击控件时,它不会前进。 这段代码有什么问题?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js></script>
<script type="text/javascript">
function(){
$('#mycarousel').carousel();
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12 well">
<div id="mycarousel" class="carousel slide span8">
<div class="carousel-inner">
<div class="item active"><img src="car1.jpg"></div>
<div class="item"><img src="car2.jpg"></div>
<div class="item"><img src="car3.jpg"></div>
<div class="item"><img src="car4.png"></div>
<div class="item"><img src="car5.jpg"></div>
</div>
<a class="carousel-control left" href="#mycarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#mycarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script src="js/carousel.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
以下代码将永远不会执行,因为您从未真正调用它。
$('#mycarousel').carousel();
您应该更改以下内容:
function(){
$('#mycarousel').carousel();
}
至:
$(function(){
$('#mycarousel').carousel();
});
当dom准备就绪时,这将使其执行。
您也不会关闭链接标签,该链接标签会从加载中加载引导CSS。
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
应该:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
您按不确定的顺序加载JS文件。 我想它们应该是相反的顺序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.