Twitter Bootstrap Carousel - получить доступ к текущему индексу

Question

Как мне получить текущий индекс из карусели?

В этом случае я использую неупорядоченный список. Я знаю, что могу искать по элементам списка, чтобы найти объект с «активным» классом CSS, но я хочу знать, могу ли я напрямую запросить объект карусели.

Дополнительно: возможность доступа к целевому индексу (по событию «слайд») также будет полезна. Опять же, я могу сделать это, выполнив поиск:

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

... и затем добавление / вычитание в зависимости от направления, но я надеюсь на что-то более чистое.

Answer 1

Вместо добавления и вычитания из текущего слайда, попробуйте это на событии «слайд»:

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

Answer 2

Это сработало для меня (Bootstrap 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())
})

Answer 3

Нет, нет доступа к индексу или направлению.

Смотрите здесь

// EDIT

Bootstrap изменил репо, новый ссылка

Answer 4

Для начальной загрузки 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);
})

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

Answer 5

$(".active", e.target).index() работает.Откуда e:

carousel.on ("slid", function (e) {$ (". Active", e.target) .index ();});

Найдено: https://github.com/twitter/bootstrap/pull/2404#issuecomment-4589229

Answer 6

Похоже, 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.
});

Answer 7

Я делаю это так, это работает очень хорошо;)

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();
});

Answer 8

Вот что я придумал после прочтения комментария Фата в ответе @ Quelltextfabrik.

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);
});

Answer 9

Мне удалось получить доступ к индексу слайдов с помощью функции 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, я рекомендую проверить их на странице документации по карусели.

Примечание: я использую загрузчик 4.3.1.