Question

所以我一直在寻找，似乎无法得到明确的答案。我有5张图片，我想让它停在最后一张幻灯片的末尾。有人可以帮助我。

以下是代码：

<!-- begin: carousel -->
        <section id="carousel">
              <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                  <div class="item active">
                    <img src="img/slider/fake1.jpg" alt="">
                    <div class="carousel-caption">
                      <h4>First Thumbnail label</h4>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="img/slider/fake2.jpg" alt="">
                    <div class="carousel-caption">
                      <h4>Second Thumbnail label</h4>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="img/slider/fake3.jpg" alt="">
                    <div class="carousel-caption">
                      <h4>Third Thumbnail label</h4>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="img/slider/fake4.jpg" alt="">
                    <div class="carousel-caption">
                      <h4>Third Thumbnail label</h4>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="img/slider/fake5.jpg" alt="">
                    <div class="carousel-caption">
                      <h4>Third Thumbnail label</h4>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                  </div>
                </div>
              </div>
        </section>
        <!-- end: carousel -->

这是我的JS

<script>
  !function ($) {
    $(function(){
      // carousel demo
      $('#myCarousel').carousel(
        {
            interval: 3000,
            pause: 'hover'
        }
      )
    })
  }(window.jQuery)
</script>

提前感谢..

我尝试添加cycle: true和clycle: 'true'，但它仍然有效，第三张幻灯片再次增加两倍（显然是幻灯片4和5），然后又回到1.

Answer 1

获取旋转木马'slide'事件的挂钩（滑动后触发），当最后一张幻灯片处于活动状态时，暂停旋转木马，如：

$('#myCarousel').bind('slid', function(e) {
    var c = e.target;
    if($(c).find('.item:last').hasClass('active')) {
        $('#myCarousel').carousel('pause');
    }
});

这是fiddle

在twitter bootstrap v2.3.0上的最后一张幻灯片上停止旋转木马

1 个答案: