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

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

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

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

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

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

Ответы

Ответ 1

Нет, нет никакого способа получить доступ к указателю или направлению.

Посмотреть здесь

//РЕДАКТИРОВАТЬ

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

Ответ 2

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

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

Ответ 3

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

Ответ 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

Ответ 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.
});

Ответ 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();
});

Ответ 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);
});

Ответ 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.