我正在尝试向我的 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>
编辑: 我做了更多的工作(感谢回答的人),我想我明白了。幻灯片实际上是动画的,而且与我的一些尝试不同,它会循环回到开头。希望就是这样。
<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>
最佳答案
如前所述,您的所有轮播元素都已标记为事件状态,并且这些元素被包装在不同的轮播内部类中。 您只需要将元素包装在 carousel-inner 类中,而不是包含 carousel-control 类的链接。 为了自动旋转木马幻灯片,您需要包括:
$(function(){
$('#carousel-example-generic').carousel();
});
检查此链接:Updated code
关于javascript - Bootstrap Carousel 不工作(一次显示所有图像),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19553469/