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')
}
更新:これは「自動再生」とは関係ありません。具体的には、手動で左ボタンと右ボタンを押すことを指します。
ページにコードを追加して、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 example carousel。 で使用されるマークアップを想定しています。
ページを開くときは、左側を非表示にしてください。
カルーセルが無限にループしないようにし(Bootstrap 3.0.0を使用)、 "次の"矢印をクリックしない限り最後のスライドで停止するには、次の方法が最適です。
$('.carousel').carousel({
interval: 5000,
wrap: false
});
wrap
オプションをfalse
に設定すると、カルーセルはスライドの循環を自動的に停止します。これがあなたの質問に正しく答えることを願っています。
Divに属性data-wrap="false"
を追加します
これを行う最も簡単な方法は次のとおりです。
//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');
}
});
同じページでBootstrapmultiple carouselsの解決策を探している人は、これを試してください:
$(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();
}
});
これで問題が解決しない場合は、今すぐお知らせください。
これがBootstrapの最新バージョンにのみ関連しているかどうかはわかりませんが、最も外側のカルーセルコンテナでdata-wrap = "false"を設定すると、最後のスライドを通過できなくなります。
bootstrap 3を使用している場合、これを使用します
$('.carousel').carousel({
wrap: false
});
ここに投稿されたコードには2つの問題があります。同じページに複数のカルーセルがある場合は機能せず、インジケータードットをクリックしても機能しません。また、Bootstrap 3では、イベントの名前が変更されました。
以下のコードは、 this code の更新バージョンです。そして、ここであなたはより多くの 詳細な説明を見つけることができます
checkitem = function() {
var $this;
$this = $("#slideshow");
if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#slideshow").on("slid.bs.carousel", "", checkitem);