twitter-bootstrap Bootstrap Carousel 不工作（一次显示所有图像）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19553469/
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 Carousel not Working (showing all images at once)
提问by Rohitha
I'm trying to add a carousel to my Bootstrap 3 website. The code used is directly from http://getbootstrap.com/javascript/#carousel. The code is also quite undocumented, so I had to make some guesses. The carousel just displays all three images stacked on top of one another. I am fairly certain that my javascript and jQuery are working, because I have a navbar set up that has working dropdowns.
我正在尝试向我的 Bootstrap 3 网站添加轮播。使用的代码直接来自http://getbootstrap.com/javascript/#carousel。代码也相当无证，所以我不得不做一些猜测。轮播只显示所有三个图像堆叠在一起。我相当确定我的 javascript 和 jQuery 正在运行，因为我有一个导航栏设置，其中包含可用的下拉列表。
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt=“Slide 1”>
<div class="carousel-caption">
<h1>Slide 1</h1>
<p>Slide 1 Description</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt=”Slide 2”>
<div class="carousel-caption">
<h1>Slide 2</h1>
<p>Slide to Description</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt=“Slide “3>
<div class="carousel-caption">
<h1>Slide 3</h1>
<p>Slide 3 Description</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
EDIT: I did some more work on it (thanks answering guys) and I think I got it. The slides actually animate and, unlike a few of my attempts, it loops back to the start. Hopefully this is it.
编辑：我做了更多的工作（感谢回答的人），我想我明白了。幻灯片实际上是动画，与我的一些尝试不同，它会循环回到开头。希望就是这样。
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- Slide 1-->
<div class="item active">
<img src="http://placehold.it/1200x480" alt="Slide 1" />
<div class="carousel-caption">
<h1>Slide 1</h1>
<p>Slide 1 Description</p>
</div>
</div>
<!-- Slide 2-->
<div class="item">
<img src="http://placehold.it/1200x480" alt="Slide 2" />
<div class="carousel-caption">
<h1>Slide 2</h1>
<p>Slide 2 Description</p>
</div>
</div>
<!-- Slide 3-->
<div class="item">
<img src="http://placehold.it/1200x480" alt="Slide 3" />
<div class="carousel-caption">
<h1>Slide 3</h1>
<p>Slide 3 Description</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
回答by Rohitha
As already told all your carousel items has been marked active and these items are wrapped in different carousel-inner class. You need to wrap only items in carousel-inner class and not link containing carousel-control class. In order to carousel slide automatically you need to include:
如前所述，您的所有轮播项目都已标记为活动，并且这些项目被包装在不同的轮播内部类中。您只需要包装 carousel-inner 类中的项目，而不需要包含 carousel-control 类的链接。为了自动轮播幻灯片，您需要包括：
$(function(){
$('#carousel-example-generic').carousel();
});
Check this link:Updated code
检查此链接：更新的代码
回答by Gavin
All of your slides are marked as active... Only one should have active class at any one time.
您的所有幻灯片都被标记为活动...在任何时候只有一张幻灯片应该有活动课程。
You also have too many carousel-inner divs. All slides need wrapping in one carousel-inner.
你也有太多的旋转木马内部 div。所有幻灯片都需要包裹在一个内部旋转木马中。
回答by Muddasir Abbas
<div class="item active">
remove active class from all div excluding first one
从除第一个 div 之外的所有 div 中删除活动类
回答by saifur
I faced the same issue today. I downloaded bootstrap.min.css from http://getbootstrap.comand was using that css. That css was showing the issue. I changed the css source to https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssand it solved the problem.
我今天遇到了同样的问题。我从http://getbootstrap.com下载了 bootstrap.min.css并使用了那个 css。那个 css 显示了这个问题。我将 css 源更改为 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css并解决了问题。
