Bootstrap - 完整的旋转木马作为控制

Question

如何让整个旋转木马充当“下一个”控件？

我有一个没有控件的最小旋转木马：

  <div id="sld" class="carousel paper2 slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active" id="first">
        <img src="img/01.jpg">
        <div class="carousel-caption"></div>
      </div>
      <div class="item" id="second">
        <img src="img/02.jpg">
        <div class="carousel-caption"></div>
      </div>
      <div class="item" id="last">
        <img src="img/03.jpg>
        <div class="carousel-caption"></div>
      </div>
    </div>
  </div>

Answer 1

<强> Fiddle Demo

您有一个名为 .carousel('next') 的方法，您可以将其调用/附加到.carousel的{​​{1}}事件，如下所示：

click

因此，只要您$('.carousel').on('click',function(){ $(this).carousel('next'); });

上的next image，就会移至 click

以下是代码段演示

carousel

$('.carousel').on('click',function(){
    $(this).carousel('next');
});