twitter-bootstrap - Twitterブートストラップカルーセルスライドの継続時間

Question

Twitter Bootstrap Carouselで、特定のスライドを他のスライドとは異なる長さにするにはどうすればよいですか？

「interval」パラメータを使用してスライダーの継続時間全体を変更できますが、特定のスライドにカスタムの継続時間を設定する方法がわかりません。

Answer 1

carousel('pause')ブートストラップ イベント ハンドラ内でまったく作業できませんでした。理由はわかりません-KnockoutJSでスライドを動的にレンダリングするか、おそらくBootstrapのバグが原因である可能性があります(私のコードだと思います)。

したがって、カルーセル内の友人とは独立して個々のスライドの間隔を設定するために、項目の属性に基づいて間隔を設定し、メソッドを手動で呼び出すslid.bs.carouselとともに、Bootstrap でバブルアップされたイベントを使用しました。setTimeoutdata-intervalcarousel('next')

JS

// slide event
$('.carousel').on('slid.bs.carousel', function () {
    var carouselData = $(this).data('bs.carousel');
    var currentIndex = carouselData.getActiveIndex();

    window.setTimeout(function() {
        $('.carousel').carousel('next');
    }, $(carouselData.$items[currentIndex]).data('interval'));
});

// init carousel
$('.carousel').carousel({
    interval: false
});

// set initial timeout for active slide data-interval
window.setTimeout(function () {
    $('.carousel').carousel('next');
}, $('.carousel .active').data('interval'));

HTML

<div class="carousel">
  <div class="carousel-inner">
    <div id="slide1" class="item active" data-interval="5000">{{content}}</div>
    <div id="slide2" class="item" data-interval="10000">{{content}}</div>
    <div id="slide3" class="item" data-interval="10000">{{content}}</div>
  </div>
</div>

この例#slide1では、カルーセルの最初のスライドになり、5 秒間表示されます。5 秒後に にスライドし#slide2ます。

#slide2にスライドする前に 10 秒間一時停止し#slide3ます。等々。等々...