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>

Bootstrap - 从一个控制器同时定位不同的旋转木马？

2 个答案: