我对Bootstrap很新。我的旋转木马不会向前移动或返回。这是代码:
[代码]
<html>
<head>
<link rel="Stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel();
});
</script>
</head>
<body>
<center>
<div class="container">
<div class="row">
<div class="span6 well">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<div class="item"><img src="1.jpg"></div>
<div class="item active"><img src="2.jpg"></div>
<div class="item"><img src="3.jpg"></div>
<div class="item"><img src="4.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="carousel.js"></script>
</center>
</body>
</html>
有人可以告诉我我做错了吗?
感谢任何/所有帮助。
答案 0 :(得分:2)
确保按顺序添加此(.js)并指向您放入的文件夹:
1- jquery library
2-js for bootstrap 3
3-您的旋转木马js
示例:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="carousel.js"></script>
希望这会对你有所帮助
答案 1 :(得分:0)
测试
<script src="carousel.js"></script>
<div id="myCarousel" class="carousel slide" >
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item"><img src="1.jpg"></div>
<div class="item active"><img src="2.jpg"></div>
<div class="item"><img src="3.jpg"></div>
<div class="item"><img src="4.jpg"></div>
</div>
<!-- Controls-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<script>
$('#myCarousel').carousel
({
interval: 2000,
})
</script>