web-dev-qa-db-ja.com

Twitter Bootstrap Carousel-現在のインデックスにアクセス

カルーセルから現在のインデックスを取得するにはどうすればよいですか？

この場合、順序付けられていないリストを使用しています。リスト項目を検索して「アクティブな」CSSクラスの項目を見つけることができることは知っていますが、カルーセルオブジェクトに直接問い合わせることができるかどうかを知りたいです。

追加：（「スライド」イベントで）ターゲットインデックスにアクセスできると便利です。繰り返しますが、これを行うには、次を検索します。

var idx = $('.carousel-inner li.active').index();

...そして、方向に基づいて加算/減算しますが、よりクリーンなものを望んでいます。

javascriptjquery-pluginstwitter-bootstrap
37
Daniel

いいえ、インデックスまたは方向にアクセスする方法はありません。

こちらを参照

//編集

ブートストラップがリポジトリを変更、新しい リンク

12
Valentin Klinghammer

現在のスライドに足したり引いたりする代わりに、「スライド」イベントでこれを試してください。

$('.carousel').on('slide',function(e){
    var slideFrom = $(this).find('.active').index();
    var slideTo = $(e.relatedTarget).index();
    console.log(slideFrom+' => '+slideTo);
});
67
Kyle

これは私のために働いた（ブートストラップ3）

$("#myCarousel").on('slide.bs.carousel', function(evt) {
  console.debug("slide transition started")
  console.debug('current slide = ', $(this).find('.active').index())
  console.debug('next slide = ', $(evt.relatedTarget).index())
})
18
Dave Sag

bootstrap 3の場合

$('#myCarousel').on('slide.bs.carousel', function (e) {
  var active = $(e.target).find('.carousel-inner > .item.active');
  var from = active.index();
  var next = $(e.relatedTarget);
  var to = next.index();
  console.log(from + ' => ' + to);
})

from https://github.com/twbs/bootstrap/pull/2404#issuecomment-22362366

11
Shaun Dychko

$(".active", e.target).index()は機能します。どこから

carousel.on（ "slid"、function（e）{$（ "。active"、e.target）.index（）;}）;

見つかりました： https://github.com/Twitter/bootstrap/pull/2404#issuecomment-4589229

10
Bass Jobsen

Bootstrap 4は最終的にこのネイティブ実装を持っています。

https://github.com/twbs/bootstrap/pull/21668

$('#myCarousel').on('slide.bs.carousel', function(e){
  e.direction     // The direction in which the carousel is sliding (either "left" or "right").
  e.relatedTarget // The DOM element that is being slid into place as the active item.
  e.from          // The index of the current item.     
  e.to            // The index of the next item.
});
9
Quv

私はそれをやっています、それはとてもうまくいきます;）

var slider = $("#slider-wrapper")
    .carousel({
        interval: 4000
    })
    .bind('slid', function() {
        var index = $(this).find(".active").index();
        $(this).find("a").removeClass('pager-active').eq(index).addClass('pager-active');
    });

$("#slider-wrapper a").click(function(e){
    var index = $(this).index();
    slider.carousel(index);
    e.preventDefault();
});
7
Nicolas Chenet

@Quelltextfabrikの回答でfatのコメントを読んだ後に思いついたものを以下に示します。

var carousel = $("#myCarousel");

carousel.on("slid", function () {
    var all = carousel.find('.item'),
        active = carousel.find('.active'),
        slidTo = all.index(active);

    console.log("Slid - Slid To: " + slidTo);
    });

carousel.on("slide", function () {
    var all = carousel.find('.item'),
        active = carousel.find('.active'),
        slidFrom = all.index(active);

    console.log("Slide - Slid From: " + slidFrom);
});
1
JackMorrissey

bootstrap documentation 。]のjquery関数を使用して、スライドインデックスにアクセスできました。

$('#carousel').on('slide.bs.carousel', function(event) {
    alert(event.from);
   // You can use use 'event.from' in whatever way works best for you here
}

イベントの.fromは、スライドインスタンスが発生するスライドを提供します。 .toは、スライドインスタンスが移動するスライドを提供します。 slide.bs.carouselを使用すると、スライドアニメーションの前に関数が実行され、slid.bs.carouselを使用すると、スライドアニメーションの後に関数が実行されますが、返されるスライド番号は同じになります。

slideイベントとslidイベントでアクセスできるプロパティがいくつかあります。カルーセルのドキュメントページで確認することをお勧めします。

注：私はbootstrap 4.3.1。

0
David Agudelo