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

IT技术 javascript html twitter-bootstrap
2021-03-08 00:33:18

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">&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 容器（#carousel-1和#carousel-2）设置两个不同的 ID 。但是我注意到除非我#myCarousel用作 div 容器的 ID，否则轮播不起作用。

在这种情况下，如何在单个页面上有多个轮播？

2个回答

更改轮播导航链接中的 href 以匹配您控制的轮播的 id 值。该 href 值是引导程序确定要滑动的方式。因此，您需要更改以下内容：

<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();

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

但是您也可以为同一行上的每个轮播定义一个实例，例如：（注意每个选择器是如何用逗号分隔的。）

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

它也能正常工作，因此只需确保为轮播的每个实例使用有效的选择器。

使用多个 ID 的重要提示。
2021-04-29 00:33:18
是否可以使它们显示在网格中？而不是堆叠在彼此之上？
2021-05-09 00:33:18
其它你可能感兴趣的问题
上一篇twitter引导程序。为什么模态事件在 JQuery 中有效，而在纯 JS 中无效？ 下一篇phantomjs 可以与 node.js 一起使用吗？