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

不,没有办法获得索引或方向.

看这里

//编辑

Bootstrap改变了回购,新链接

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

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