Question

你如何在一页上控制2个Bootstrap轮播，只有一套旋转木马指示器？目前，我使用相同的“.carousel”类设置两个旋转木马。当用户单击下一个或上一个控件时，两个轮播上的幻灯片事件同时执行。

我正在尝试将幻灯片事件绑定到旋转木马指示器，这些指示器嵌套在主旋转木马中。期望的结果是将幻灯片事件绑定到第二轮播的ID，以便下一个/上一个幻灯片事件完全相同。这是我到目前为止所做的：

$(document).ready(function(){
  $('.carousel-indicator li').click('slide', function() {
    $('#project-carousel-phone').bind().carousel();
  });
});

我吮吸Javascript，所以任何方向都会非常感激。谢谢！

Answer 1

不要担心这个^^，我希望这个解决方案能让你感兴趣。

看看这个Bootply：http://bootply.com/113007

在这个bootply中，有两个caroussel：[id]'myCarousel'和'myCarousel2'

正是这一部分：

  <!-- Carousel nav -->
  <a class="carousel-control left" href="[id^=myCarousel]" data-slide="prev">‹</a>
  <a class="carousel-control right" href="[id^=myCarousel]" data-slide="next">›</a>

如您所见，为了将导航链接到两个轮播：

href="[id^=myCarousel]"

Answer 2

我在寻找答案的同时遇到了这个问题。我的解决方案是：

var carousel1 = $('#carousel1').carousel();
var carousel2= $('#carousel2').carousel();
carousel1.on('slide.bs.carousel', function(event) {
    var to = $(event.relatedTarget).index();
    carousel2.carousel(to);
});

这应该通过下一个/上一个按钮，轮播指示符和间隔更改来处理更改。

我找到的先前解决方案（由Marky Mark＆＃39;在此引用https://github.com/twbs/bootstrap/issues/12765提及）似乎导致轮播不同步。

Answer 3

已达成解决方案。请参阅下面的示例了解如何实施。

http://jsfiddle.net/LE4f4/

$('.carousel-indicators li').on('click', function() { $('.carousel').carousel(parseInt(this.getAttribute('data-to'))); });

Twitter Bootstrap - 使用一组旋转木马指示器控制多个旋转木马

3 个答案: