Javascript 是否可以在一页上有多个 Twitter Bootstrap 轮播？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10521257/
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
Is it possible to have multiple Twitter Bootstrap carousels on one page?
提问by its_me
Twitter Bootstrap Version:2.0.3
Twitter 引导程序版本：2.0.3
Example HTML code:
示例 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>
Example CSS:bootstrap.css
示例 CSS：bootstrap.css
Problem:For two bootstrap carousels to work on a page, basically, I need to set two different IDs for their div containers (#carousel-1and #carousel-2). But I've noticed that the carousels do not work unless I use #myCarouselas the ID of the div container.
问题：对于在一个页面上工作的两个引导轮播，基本上，我需要为其 div 容器（#carousel-1和#carousel-2）设置两个不同的 ID 。但我注意到除非我#myCarousel用作 div 容器的 ID，否则轮播不起作用。
In that case, how can I have multiple carousels on a single page?
在这种情况下，如何在单个页面上有多个轮播？
回答by dgabriel
Change the href in your carousel nav links to match the id value of the carousel you're controlling. That href value is how bootstrap determines which to slide. So you will need to change the following:
更改轮播导航链接中的 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>
And for the second carousel:
对于第二个旋转木马：
<a class="carousel-control left" href="#carousel-2" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-2" data-slide="next">›</a>
回答by Andres Ilich
You can have multiple carousels running in one page, all you have to do is call them appropriately. For instance, take this example i wrote on another question i posted:
您可以在一页中运行多个轮播，您所要做的就是适当地调用它们。例如，以我在发布的另一个问题上写的这个例子为例：
http://jsfiddle.net/andresilich/S2rnm/
http://jsfiddle.net/andresilich/S2rnm/
I have three carousels running at the same time, each with their own unique ID. They're being called using an attribute selector like so:
我同时运行三个轮播，每个轮播都有自己的唯一 ID。使用属性选择器调用它们，如下所示：
$('[id^="myCarousel"]').carousel();
So each carousel has an id that begins exactly with the ID of #myCarouseland then a number to set them apart.
所以每个旋转木马都有一个 id，它以 的 ID 开头#myCarousel，然后是一个数字来区分它们。
But you can also define an instance for each carousel on the same line, for example: (Notice how each selector is separated by a comma.)
但是您也可以为同一行上的每个轮播定义一个实例，例如：（注意每个选择器是如何用逗号分隔的。）
$('#myCarousel1, #myCarousel2, #differentCarousel3').carousel();
And it will work as well, so just make sure you use a valid selector for each instance of your carousels.
它也能正常工作，因此只需确保为每个轮播实例使用有效的选择器即可。
