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

不，没有办法获取索引或方向。

See here

//编辑

Bootstrap更改了repos，new link

Answer 4

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

来自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

我这样做，有点好用;）

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 7

这是我在@ 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 8

我能够使用引导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事件还可以让您访问其他一些属性，建议您在轮播文档页面上将其检出。

注意：我正在使用引导程序4.3.1。

Twitter Bootstrap Carousel - 访问当前索引

8 个答案: