我正在将bootstrap carousel实现到我的页面中，但是我只能看到第一个项目（包含3个部分）而不是其他两个。
在bootply http://www.bootply.com/A465PmKBRm中它正在运行，但不在我的网站上。用我正在使用的版本测试它。
我在这里缺少什么？
<div class="row">
<div id="carousel-content" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-content" data-slide-to="0" class="active"></li>
<li data-target="#carousel-content" data-slide-to="1" class=""></li>
<li data-target="#carousel-content" data-slide-to="2" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
</div>
<div class="item">
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
</div>
<div class="item">
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-content" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-content" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
答案 0 :(得分：10)
正如R Lam在评论中所说，最可能的原因是你错过了bootstrap.js或者已经以某种方式禁用了你网站上的Javascript执行（例如过于严格的CSP政策）。检查控制台中是否生成了任何错误以及Javascript是否已打开。这可能是因为没有Javascript，bootstrap.css文件将显示第一个轮播项目，但不允许切换到其他项目。
答案 1 :(得分：1)
这一件正在运作！
1.看来你没有添加结束js
<script> codes </script>|| 2.链接
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Working! bootstrap-carousel</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body>
<div class="row">
<div id="carousel-content" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-content" data-slide-to="0" class="active"></li>
<li data-target="#carousel-content" data-slide-to="1" class=""></li>
<li data-target="#carousel-content" data-slide-to="2" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
</div>
<div class="item">
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
</div>
<div class="item">
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
<!-- SINGLE SERVICE -->
<div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
<!-- SERVICE HEADING -->
<h3>text</h3>
<!-- SERVICE DESCRIPTION -->
<p>description</p>
</div>
<!-- /END SINGLE SERVICE -->
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-content" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-content" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<script>
// sandbox disable popups
if (window.self !== window.top && window.name!="view1") {;
window.alert = function(){/*disable alert*/};
window.confirm = function(){/*disable confirm*/};
window.prompt = function(){/*disable prompt*/};
window.open = function(){/*disable open*/};
}
// prevent href=# click jump
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for(var i=0; i < links.length; i++) {
if(links[i].href.indexOf('#')!=-1) {
links[i].addEventListener("click", function(e) {
console.debug("prevent href=# click");
if (this.hash) {
if (this.hash=="#") {
e.preventDefault();
return false;
}
else {
var el = document.getElementById(this.hash.replace(/#/, ""));
if (el) {
el.scrollIntoView(true);
}
}
}
return false;
})
}
}
}, false);
</script>
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
答案 2 :(得分：1)
检查以下
（1）确认你已经在你的代码bootstrap.js中引用了哪些是必不可少的，不要忘记bootstrap.css。
（2）检查您的应用程序和其他第三方js库文件，尤其是在使用捆绑和缩小时。确保你正在使用的任何东西都是正确的，因为如果不是这样的话，你的许多包含bootstrap.js的库可能会搞砸并且你失去了它们的功能
（3）您写的任何其他JavaScript文件也必须检查错误。
请调试项目是否存在JavaScript错误。午餐Chrome浏览器并按F12，单击F12命令打开的开发人员视图中的控制台选项卡，然后在该选项卡中打开您的站点，查看您的javascripts文件是否有任何问题。
正如您可以看到的那样，您的引导程序轮播工作正常，但在您的网站中包含其他库，可能还有您自己的JavaScript文件，它不起作用。
如果您在此处获得有关您的bootstrap carousel帖子问题的更多信息，请让人们支持并从中学习。
答案 3 :(得分：0)
您错过了一些与您的网页链接的JS文件， 这个例子很好地解释了你，W3school