轮播不会从一张图片滑到下一张。
这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initialscale=1.0" />
<title>Economic Prosperity - The No.1 Minecraft Economy Server!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<style>
.carousel .item {
width: 100%; /*slider width*/
max-height: 400px; /*slider height*/
}
.carousel .item img {
width: 100%; /*img width*/
}
/*full width container*/
@media (max-width: 767px) {
.block {
margin-left: -20px;
margin-right: -20px;
}
}
</style>
</head>
<body>
<div class=" navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="#" class="brand">Economic Prosperity</a>
<ul class="nav pull-left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Vote</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#"> <b>Server Status:</b></a></li>
<li><a href="#" style="color:#00CC00"><b>Online</b></a></li>
</ul>
<div class="nav pull-right">
<a class="btn btn-primary">Log In</a>
</div>
</div>
</div>
</div>
<div class="container" style="width:100%;"> <!--Start of Carousel -->
<section class="block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://fc07.deviantart.net/fs71/f/2010/299/f/6/minecraft_cave_by_harryisland-d31jtwd.jpg" alt="Slide1" />
</div>
<div class="item">
<img src="http://fc05.deviantart.net/fs70/i/2013/066/6/d/minecraft_grass_background_by_lastvoltage-d5x9vzb.png" alt="Slide2" />
</div>
<div class="item">
<img src="http://img16.imageshack.us/img16/4206/tapeta16x9.png" alt="Slide3" />
</div><div class="carousel-caption" >
<h1 style="color:#999">EcoPro - The No.1 Server dedicated to Economy!</h1>
<p class="lead">Sell your items, trade with players, sell on the auction and even set up your own shop in a city!</p>
</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>
</section>
</div> <!--End of Carousel -->
<div class="hero-unit" style="width:90%; margin-right:auto; margin-left:auto;"> <!-- Start Hero -->
<h2>What is EcoPro all about?</h2>
<p>We aim to provide the best server out there with the sole main aim of gaining wealth to purchase benefits. Our server is not just your standard server, we put effort, time and skill into the creation of it. The sole aim of this server is to entertain YOU as best it can. The server is 100% non profit, so all of the donations recieved go straight back into the server to add to the quality of your gaming experience!
<p><a href="#" class="btn btn-info">Tell me more!</a></p>
</div> <!-- End Hero Unit -->
<div class="container" style="width:400px; float:left; margin-left:2%"> <!-- Server Features -->
<div class="well">
<h3>The Server's main Features:</h3>
<p>
<li>Economy (Duh!)</li>
<li>Custom World</li>
<li>Cities</li>
<li>Wealth based ranks</li>
<li>McMMo + Spells + Shops + More!</li>
</p>
</div>
</div> <!-- End server features -->
<div class="container">
<img src="" width="140px" height="140px" class="img-circle" />
</div>
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script>
// Load this when the DOM is ready
$(function(){
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
</body>
</html>
我只需要按钮就可以工作，我已经看了很长时间了，无法弄清楚出了什么问题。我还查看了其他答案，但他们没有帮助。