16

Bootstrap カルーセルは奇妙な獣です。無限ループを防ぐために $next を微調整しようとしましたが、最終的にはそれを壊すか、最後に到達したときにスライドが逆戻りするのを防ぎます。

カルーセルがリスト内でスライドするだけで、無限にループしないようにしたいと思います。

どんな助けでも大歓迎です。

$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
    this.$element.trigger(e)
    if (e.isDefaultPrevented()) return
    $next.addClass(type)
    $next[0].offsetWidth // force reflow
    $active.addClass(direction)
    $next.addClass(direction)
    this.$element.one($.support.transition.end, function() {
        $next.removeClass([type, direction].join(' ')).addClass('active')
        $active.removeClass(['active', direction].join(' '))
        that.sliding = false
        setTimeout(function() {
            that.$element.trigger('slid')
        }, 0)
    })
} else {
    this.$element.trigger(e)
    if (e.isDefaultPrevented()) return
    $active.removeClass('active')
    $next.addClass('active')
    this.sliding = false
    this.$element.trigger('slid')
}

更新: これは「自動再生」とは関係ありません。具体的には、左右のボタンを手動で押すことを指しています。

4

8 に答える 8

24

カルーセルが無限にループせず (Bootstrap 3.0.0 を使用)、「次へ」の矢印をクリックしない限り最後のスライドで停止するには、次の方法が最適です。

$('.carousel').carousel({
  interval: 5000,
  wrap: false
});

wrapにオプションを設定するfalseと、カルーセルにスライドの循環を自動的に停止するように指示します。これがあなたの質問に正しく答えることを願っています。

于 2013-10-03T11:13:35.010 に答える
14

slidイベント後に適切なカルーセル コントロールを非表示にするコードをページに追加するだけです。

$('#myCarousel').on('slid', '', function() {
  var $this = $(this);

  $this.children('.carousel-control').show();

  if($('.carousel-inner .item:first').hasClass('active')) {
    $this.children('.left.carousel-control').hide();
  } else if($('.carousel-inner .item:last').hasClass('active')) {
    $this.children('.right.carousel-control').hide();
  }

});

この例では、 Twitter Bootstrap サンプル カルーセルで使用されているマークアップを想定しています。

ページを開いたときは、必ず左側を非表示にしてください。

于 2012-07-11T21:56:24.797 に答える
5

data-wrap="false"Divに属性を追加

于 2015-03-14T19:26:36.243 に答える
3

これを行う最も簡単な方法は次のとおりです。

//intro slider
$('#carousel_fade_intro').carousel({
    interval: 2500,
    pause: "false"
})

//Stop intro slider on last item
var cnt = $('#carousel_fade_intro .item').length;
$('#carousel_fade_intro').on('slid', '', function() {
    cnt--;
    if (cnt == 1) {
        $('#carousel_fade_intro').carousel('pause');
    }
});
于 2013-05-08T23:52:57.280 に答える
2

同じページの複数のカルーセルで動作するBootstrap 3の解決策を探している人は、これを試してください。

$(function() {
    // init carousel
    $('.carousel').carousel({
        pause: true,        // init without autoplay (optional)
        interval: false,    // do not autoplay after sliding (optional)
        wrap:false          // do not loop
    });
    // init carousels with hidden left control:
    $('.carousel').children('.left.carousel-control').hide();
});

// execute function after sliding:
$('.carousel').on('slid.bs.carousel', function () {
    // This variable contains all kinds of data and methods related to the carousel
    var carouselData = $(this).data('bs.carousel');
    // get current index of active element
    var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));

    // hide carousel controls at begin and end of slides
    $(this).children('.carousel-control').show();
    if(currentIndex == 0){
        $(this).children('.left.carousel-control').fadeOut();
    }else if(currentIndex+1 == carouselData.$items.length){
        $(this).children('.right.carousel-control').fadeOut();
    }
});

これがあなたのケースでうまくいかない場合は、今すぐ私に連絡してください。

于 2015-03-13T10:30:25.910 に答える
1

これが Bootstrap の最新バージョンにのみ関連するものかどうかはわかりませんが、最も外側のカルーセル コンテナーに data-wrap="false" を設定すると、最後のスライドを通過できなくなります。

ソース: http://getbootstrap.com/javascript/#carousel-options

于 2015-01-30T14:25:13.427 に答える