Bootstrap - 从一个控制器同时定位不同的轮播？

Question

我正在使用 Twitter Bootstrap 建立一个网站，其中包含 几个轮播。我的想法是我想要一个带有指示器和控件的主轮播，没有它们的辅助轮播，并且从单个轮播控件同时控制所有轮播，即主轮播。

编辑：嗯，实际上不是全部，而是大部分。我正在专门研究使用单个轮播控件来定位一组类/ID，但让其他一些仍然自主工作......

示例代码：

<!-- One Carousel to rule them all -->
<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 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>

<!-- The ruled carousel -->
<div id="myCarousel2" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
</div>

问题是，具有相同 id 的轮播不起作用，我不确定如何从轮播导航中的单个 href 定位不同的 id。我试过了：

<a class="carousel-control left" href="#myCarousel #myCarousel2" data-slide="prev">&lsaquo;</a>

或

<a class="carousel-control left" href="#myCarousel, #myCarousel2" data-slide="prev">&lsaquo;</a>

或

<a class="carousel-control left" href="#myCarousel" href="#myCarousel2" data-slide="prev">&lsaquo;</a>

没有运气......

谢谢！

Answer 1

您可以使用类 .carousel 代替 ID。

<a class="carousel-control left" href=".carousel" data-slide="prev">&lsaquo;</a>

Here is an example on jsFiddle

我删除了carousel-indicators，因为这会使它们完全不同步。

您还想像这样使用 jQuery 禁用自动滚动......

$('.carousel').carousel({
    interval: false 
});

Answer 2

为了轻松定位页面上的所有轮播，@Schmalzy 的解决方案非常完美。

尽管如此，我还是想出了针对特定轮播组的目标，并让其余部分留给他们自己的控件，这是受这个问题的启发：put two ids in one a href

由于 Javascript 是一个选项，它们的关键是在控件上调用一个 JS 函数并传递一个目标 ID 数组和操作：

<a class="carousel-control left" href="#" onclick="slideCarousels(['myCarousel', 'myCarousel2'], 'prev')">&lsaquo;</a>
<a class="carousel-control right" href="#" onclick="slideCarousels(['myCarousel', 'myCarousel2'], 'next')">&rsaquo;</a>

使用以下 JS：

function slideCarousels(ids, action) {
    var len = ids.length;
    var id = null;

    for (var i = 0; i < len; i++) {
        id = ids[i];
        $('#' + id).carousel({ slide: action });
    }
}

因此，完整的最终代码：

<!-- One Carousel to rule them all -->
<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 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="#" onclick="slideCarousels(['myCarousel', 'myCarousel2'], 'prev')">&lsaquo;</a>
  <a class="carousel-control right" href="#" onclick="slideCarousels(['myCarousel', 'myCarousel2'], 'next')">&rsaquo;</a>
</div>

<!-- The ruled carousel -->
<div id="myCarousel2" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
</div>

<!-- The mighty carousel -->
<div id="myCarousel3" class="carousel slide">
  <!-- this carousel wouldn't be affected by the controls in '#myCarousel' -->
</div>

<script type="text/javascript"> 
function slideCarousels(ids, action) {
  var len = ids.length;
  var id = null;

  for (var i = 0; i < len; i++) {
      id = ids[i];
      $('#' + id).carousel({ slide: action });
  }
}
</script>