引导轮播不起作用(一次显示所有图像)
Bootstrap Carousel not Working (showing all images at once)
我正在尝试向我的 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>
如前所述,您的所有轮播项目都已标记为活动,并且这些项目包装在不同的轮播内部类中。您只需要包装轮播内部类中的项目,而不需要包装包含轮播控件类的链接。为了自动旋转轮播幻灯片,您需要包括:
$(function(){
$('#carousel-example-generic').carousel();
});
检查此链接:更新的代码
您的所有幻灯片都标记为活动...任何时候只有一个人应该有活动类。
你也有太多的轮播内部div。所有幻灯片都需要包装在一个轮播内部。
<div class="item active">
从除第一个div 之外的所有div 中删除活动类
我今天遇到了同样的问题。我从 http://getbootstrap.com 下载了bootstrap.min.css并正在使用该css。该 css 显示了问题。我将 css 源更改为https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css它解决了这个问题。
相关文章:
- 一次显示一个隐藏指令-AngularJS
- 一次显示一个指令AngularJS
- Slding表单不会一次显示一个表单
- 一次显示/隐藏一个Javascript
- 一次显示一个标记-谷歌地图API v3
- 一次显示n个列表元素,jQuery
- 想要在fullcalendar插件的周视图中一次显示3天
- 用JavaScript制作战斗模拟器,无法一次显示整个模拟
- 尝试连续一次显示多个 php 文件
- 如何使用 javascript 一次显示此数组的字符串内容
- 如何保持一次显示一个悬停
- 引导轮播不起作用(一次显示所有图像)
- 在一个页面上一次显示所有“标题”工具提示
- 如何设置仅一次显示通知栏的cookie
- 从上到下的可见图像堆积:有没有办法一次显示
- 枚举内容滑块一次显示两个图像
- 使用 JS 随机化表行,同时一次显示一个表行
- 寻找一个JS滑块插件,它支持一次显示多张幻灯片,以及不同宽度的幻灯片
- 选择项目并一次显示n篇文章
- 一次显示一个DOM元素的淡入/淡出列表