Bootstrap 3 Carousel 不起作用。（是的，我在 Bootstrap 之前加载了 jQuery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18110242/
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
Bootstrap 3 Carousel won't work. (Yes, I have jQuery loaded before Bootstrap)
提问by David Byers
I'm converting an application to Bootstrap 3. Here's the code to my sample carousel page, in its entirety. Yes, I have jQuery loaded before the Bootstrap.js gets loaded. For whatever reason, the carousel simply will not work. Specifically: the previous/next buttons don't work and the carousel doesn't automatically slide to the next slide.
我正在将应用程序转换为 Bootstrap 3。这是我的示例轮播页面的完整代码。是的，我在加载 Bootstrap.js 之前加载了 jQuery。无论出于何种原因，轮播都无法正常工作。具体来说：上一个/下一个按钮不起作用，并且轮播不会自动滑到下一张幻灯片。
Tested against:
测试针对：
- Safari 6.0.5
- Chrome 28.0.1500.95
- Firefox 23.0
- Safari 6.0.5
- 铬 28.0.1500.95
- 火狐 23.0
...on Mac OS X 10.8.4
...在 Mac OS X 10.8.4 上
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="" alt-src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-glyphicons.css" type="text/css">
<title>Carousel Test</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script>
// Added this just so I didn't have to wait 5 seconds to see if the transition worked. //
$(document).ready(function() {
$('#Carousel').carousel({
interval: 1000
});
});
</script>
</head>
<body>
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="0" class="active"></li>
<li data-target="Carousel" data-slide-to="1"></li>
<li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/Carousel/001.jpg">
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="img/Carousel/002.jpg">
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="img/Carousel/003.jpg">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
Anyone have an insight on why this is not working?
任何人都知道为什么这不起作用？
采纳答案by Zim
Try one carousel-innerwith multiple items inside..
尝试一个里面carousel-inner有多个items 的..
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="0" class="active"></li>
<li data-target="Carousel" data-slide-to="1"></li>
<li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/Carousel/001.jpg">
</div>
<div class="item">
<img src="img/Carousel/002.jpg">
</div>
<div class="item">
<img src="img/Carousel/003.jpg">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Demo: http://bootply.com/72622
回答by Stephen Hess
There's another mistake in this code which is that the carousel indicators aren't clickable. They should be links that take you to the appropriate panel.
此代码中还有另一个错误，即轮播指示器不可点击。它们应该是将您带到相应面板的链接。
You need to add a hashtag to the data target:
您需要向数据目标添加一个主题标签：
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
回答by Vishal Chhatwani
This is to help someone who was stuck like me despite writing all the code correctly. I was trying to find a error in the code but everything was fine. Then I checked my javascript files and noticed that somehow their type changed to .js.txt. So I just changed it to .jsand it worked.
这是为了帮助像我这样尽管正确编写所有代码但仍被卡住的人。我试图在代码中找到错误，但一切都很好。然后我检查了我的 javascript 文件并注意到它们的类型以某种方式更改为.js.txt。所以我只是将其更改为.js并且它起作用了。
Happy coding !
快乐编码！
回答by Dsp
For the slider to work you must include:
要使滑块工作，您必须包括：
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
at the bottom of your document(before body closing tag)
在文档底部（在正文结束标记之前）
