0

我正在使用 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">…&lt;/div>
    <div class="item">…&lt;/div>
    <div class="item">…&lt;/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">…&lt;/div>
    <div class="item">…&lt;/div>
    <div class="item">…&lt;/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>

没有运气...

谢谢！

4

2 回答 2

2

您可以使用类.carousel而不是 ID。

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

这是关于 jsFiddle 的示例

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

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

$('.carousel').carousel({
    interval: false 
});
于 2013-09-26T02:01:00.240 回答
1

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

尽管如此，我还是想出针对特定的轮播组，并让其余部分保留受此问题启发的自己的控件：将两个 id 放在一个 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">…&lt;/div>
    <div class="item">…&lt;/div>
    <div class="item">…&lt;/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">…&lt;/div>
    <div class="item">…&lt;/div>
    <div class="item">…&lt;/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>
于 2013-09-26T17:01:58.167 回答