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

问题描述：

Twitter的引导版本： 2.0.3是否有可能在一个页面上有多个Twitter Bootstrap轮播？

实施例的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

问题：对于双引导到转盘上的工作页面，基本上，我需要为他们的div容器设置两个不同的ID（#carousel-1和#carousel-2）。但我注意到，除非我使用#myCarousel作为div容器的ID，否则传送带不起作用。

在这种情况下，我怎么能在一个页面上有多个轮播？

答

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

答

您可以在一个页面上运行多个传送带，您只需要适当地调用它们即可。举例来说，拿这个例子，我在另一个问题我贴写道：

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

我有三个转盘在同一时间运行，每一个都有自己独特的ID。他们正在使用的属性选择像所谓：

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

因此，每个转盘具有与#myCarousel的ID，然后一个数字来设置他们除了开始完全是一个ID。

但你也可以定义一个实例为在同一行的每个旋转木马，例如：（注意如何每个选择用逗号分隔）

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

而且它也能发挥作用，所以才确保你的传送带的每个实例都使用有效的选择器。

使用多个ID伟大的小费。 –

是否可以使它们显示在网格中？而不是堆叠在彼此之上？ – caffeinescript

优秀的解决方案，为我工作。 – Pupil

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

相关推荐