是否有可能在一个页面上有多个Twitter Bootstrap轮播？

Question

是否有可能在一个页面上有多个Twitter Bootstrap轮播？

its*_*_me 26 html javascript twitter-bootstrap

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>

Run Code Online (Sandbox Code Playgroud)

示例CSS: bootstrap.css

问题:对于在页面上工作的两个引导程序轮播,基本上,我需要为它们的div容器(#carousel-1和#carousel-2)设置两个不同的ID .但我注意到旋转木马不起作用,除非我#myCarousel用作div容器的ID.

在这种情况下,如何在一个页面上放置多个轮播？

Answer 1

小智 66

更改轮播导航链接中的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>

Run Code Online (Sandbox Code Playgroud)

对于第二个轮播:

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

And*_*ich 16

您可以在一个页面中运行多个轮播,您只需要适当地调用它们.例如,我在我发布的另一个问题上写了这个例子:

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

我有三个同时运行的轮播,每个轮播都有自己独特的ID.他们正在使用属性选择器调用,如下所示:

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

Run Code Online (Sandbox Code Playgroud)

因此,每个轮播都有一个id,它以ID为开头#myCarousel,然后是一个数字,将它们分开.

但您也可以在同一行上为每个轮播定义一个实例,例如:(注意每个选择器如何用逗号分隔.)

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

Run Code Online (Sandbox Code Playgroud)

它也可以工作,所以请确保为旋转木马的每个实例使用有效的选择器.

归档时间：	14 年前
查看次数：	58223 次
最近记录：	14 年前