logo标签列表

一个页面上是否可以有多个Twitter Bootstrap轮播组件？

javascripthtmltwitter-bootstrap
29

Twitter Bootstrap 版本：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">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</body>
</html>

示例 CSS：bootstrap.css

问题：为了在页面上使用两个 Bootstrap 轮播组件，我需要为它们的 div 容器设置两个不同的 ID（#carousel-1和#carousel-2）。但是我发现，除非我使用#myCarousel作为 div 容器的 ID，否则这些轮播组件将无法工作。

在这种情况下，我应该如何在单个页面上使用多个轮播组件？

2个回答
69

将轮播导航链接中的href更改为与您控制的轮播的id值匹配。这个href值是bootstrap用来确定要滑动哪个轮播的。因此，您需要更改以下内容：

<a class="carousel-control left" href="#carousel-1" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">&rsaquo;</a>

对于第二个走马灯：

<a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a>
16

在同一页中可以运行多个轮播图，你只需要适当地调用它们即可。例如，看看我在另一个问题中写的这个示例：

http://jsfiddle.net/andresilich/S2rnm/

我同时运行了三个轮播图，每个都有自己独特的ID。它们使用属性选择器进行调用，就像这样：

$('[id^="myCarousel"]').carousel();

因此，每个轮播图的id都以#myCarousel开头，然后有一个数字来区分它们。

但是你也可以在同一行上为每个轮播图定义一个实例，例如：（请注意，每个选择器之间用逗号分隔。）

$('#myCarousel1, #myCarousel2, #differentCarousel3').carousel();

它也可以正常工作，只要确保为每个旋转木马实例使用有效的选择器即可。

1
使用多个ID的绝佳技巧。 - its_me
能否将它们显示在网格中，而不是堆叠在一起？ - caffeinescript
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接