2

我一直在寻找，似乎无法得到明确的答案。我有 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。

4

1 回答 1

1

获取轮播的“滑动”事件（滑动后触发）的钩子，当最后一张幻灯片处于活动状态时暂停轮播，例如：

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

这是一个小提琴

于 2013-02-27T06:59:49.167 回答