twitter-bootstrap Twitter Bootstrap 轮播不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17389137/
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
Twitter Bootstrap carousel not working
提问by hellzone
Do I need to download more library to run Twitter Bootstrap carousel? I just downloaded Twitter Bootstrap from http://twitter.github.io/bootstrap/index.html. I think there is a problem with my javascript libraries. I can see images, left and right buttons but when i click to right for example, nothing happens.
我是否需要下载更多库来运行 Twitter Bootstrap carousel？我刚刚从http://twitter.github.io/bootstrap/index.html下载了 Twitter Bootstrap 。我认为我的 javascript 库有问题。我可以看到图像、左右按钮，但是例如当我向右单击时，什么也没有发生。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item">
<img src="assets/img/02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="assets/img/03.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script src="js/holder/holder.js"></script>
回答by David Taiaroa
Is there a reason why you aren't initialising the carousel with:
您是否有理由不使用以下内容初始化轮播：
<script type="text/javascript">
$(document).ready(function() {
$('#myCarousel').carousel({
//options here
});
});
</script>
EDIT
Here's an example with your HTML
Live example
edit
If this still doesn't work for you, maybe there's an issue with your CSS or JS files. You could easily check this by replacing your local files with CDN versions, here is one source:
http://www.bootstrapcdn.com
编辑
这是您的 HTML
Live 示例
编辑
示例
如果这仍然对您不起作用，则可能是您的 CSS 或 JS 文件存在问题。您可以通过用 CDN 版本替换本地文件来轻松检查这一点，这是一个来源：http:
//www.bootstrapcdn.com
Good luck!
祝你好运！
EDIT 2
编辑 2
Your pastebin code is missing a jQuery link. If you change your head to the following I think you will be good to go ;)
您的pastebin 代码缺少 jQuery 链接。如果你改头换面，我认为你会很高兴;)
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
$(document).ready(function() {
$('#myCarousel').carousel({
//options here
});
});
</script>
</head>
回答by clarenswd
You have to add the "http:" on the following lines (if your pages are on your computer)
您必须在以下几行添加“http:”（如果您的页面在您的计算机上）
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
