【发布时间】：2015-06-23 16:05:13
【问题描述】：
因此，这里有另外一百万个问题，询问 Bootstrap 的轮播为什么不工作。据我所知，没有其他人和我有同样的问题。你可能不相信我，也许我也不完全相信自己。不管怎样，就这样吧。
所以我的代码是来自Bootstrap's carousel example 的文字复制和粘贴，这里和那里有一些小的改动。随意将粘贴复制到您自己的 html 文件中并查看它。我已经包含了 Bootstrap 的 css 和 javascript，我已经包含了 jquery，并且我已经初始化了我的轮播。具体不起作用的是左右按钮。他们的预期行为是循环浏览每个项目 div 中的图像，但实际发生的事情是什么。从示例的页面源复制时轮播不起作用，并且在我进行更改后也不起作用。
请注意，我确实看到了有关通过 file:// URL 查看页面的警告，并且代码在托管到 S3 存储桶时也不起作用。
第一个指出我为什么愚蠢的人可以获得免费积分！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://www.mountainprofessor.com/images/Mountain-Ranges-Colorado-2.jpg" alt="First slide" style="width:100%;height:500px;">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="http://7-themes.com/data_images/out/50/6943013-mountain-lake.jpg" alt="Second slide" style="width:100%;height:500px">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Example text.</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
</body>
</html>【问题讨论】：
-
找到了解决方案！在加载 Bootstrap 的 Javascript 之前，我只需要加载 JQuery。至于为什么需要这种排序，谁知道呢。
标签： html twitter-bootstrap carousel