是否可以在一页上有多个 Twitter Bootstrap 轮播？
Posted
技术标签:
【中文标题】是否可以在一页上有多个 Twitter Bootstrap 轮播？【英文标题】：Is it possible to have multiple Twitter Bootstrap carousels on one page? 【发布时间】：2012-05-18 06:33:39 【问题描述】：Twitter 引导版本： 2.0.3
示例 HTML 代码：
<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type="text/javascript">
$(document).ready(function()
$('.carousel').each(function()
$(this).carousel(
pause: true,
interval: false
);
);
);
</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
</head>
<body>
<div id="carousel-1" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<div id="carousel-2" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</body>
</html>
示例 CSS： bootstrap.css
问题：为了让两个引导轮播在一个页面上工作，基本上，我需要为它们的 div 容器设置两个不同的 ID（#carousel-1 和 #carousel-2）。但我注意到轮播不起作用，除非我使用 #myCarousel 作为 div 容器的 ID。
在那种情况下，我怎么能在一个页面上有多个轮播呢？
【问题讨论】：
【参考方案1】：更改轮播导航链接中的 href 以匹配您正在控制的轮播的 id 值。该 href 值是引导程序如何确定要滑动的内容。因此，您需要更改以下内容：
<a class="carousel-control left" href="#carousel-1" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">›</a>
对于第二个轮播：
<a class="carousel-control left" href="#carousel-2" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-2" data-slide="next">›</a>
【讨论】：
【参考方案2】：您可以在一个页面中运行多个轮播，您所要做的就是适当地调用它们。例如，以我在发布的另一个问题上写的这个例子为例：
http://jsfiddle.net/andresilich/S2rnm/
我同时运行三个轮播，每个轮播都有自己唯一的 ID。使用如下属性选择器调用它们：
$('[id^="myCarousel"]').carousel();
因此，每个轮播都有一个以#myCarousel 开头的 ID，然后是一个用于将它们分开的数字。
但您也可以在同一行为每个轮播定义一个实例，例如：（注意每个选择器是如何用逗号分隔的。）
$('#myCarousel1, #myCarousel2, #differentCarousel3').carousel();
而且它也可以正常工作，因此只需确保为轮播的每个实例使用有效的选择器即可。
【讨论】：
使用多个 ID 的重要提示。 是否可以让它们显示在网格中？而不是堆叠在一起？以上是关于是否可以在一页上有多个 Twitter Bootstrap 轮播？的主要内容，如果未能解决你的问题，请参考以下文章