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'が、まだ続き、3 番目のスライドはさらに 2 回 (明らかにスライド 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 に答える