Twitter Bootstrap Carousel - 访问当前索引答案

【问题标题】：Twitter Bootstrap Carousel - access current indexTwitter Bootstrap Carousel - 访问当前索引
【发布时间】：2012-04-09 06:23:51
【问题描述】：

如何从轮播中获取当前索引？

在这种情况下，我使用的是无序列表。我知道我可以搜索列表项以找到具有“活动”CSS 类的项，但我想知道是否可以直接询问轮播对象。

附加：能够访问目标索引（在“幻灯片”事件中）也很方便。同样，我可以通过搜索来做到这一点：

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

...然后根据方向加/减，但我希望有更干净的东西。

【问题讨论】：

标签： javascript jquery-plugins twitter-bootstrap

【解决方案1】：

$(".active", e.target).index() 有效。 e 来自哪里：

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

发现于：https://github.com/twitter/bootstrap/pull/2404#issuecomment-4589229

【讨论】：

【解决方案2】：

我能够使用引导程序 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。

【讨论】：

开箱即用的实际解决方案。无需复杂查询

【解决方案3】：

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

【讨论】：

完美答案！

【解决方案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

【讨论】：

短版是：var to = $(e.relatedTarget).index()

【解决方案5】：

这对我有用（引导 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())
})

【讨论】：

在 2020 年 4 月中旬也与 Bootstrap 4 一起工作得最好

【解决方案6】：

不，没有办法访问索引或方向。

See here

// 编辑

Bootstrap 已更改存储库，新 link

【讨论】：

此链接建议$(".active", e.target).index() 似乎运作良好。
“页面未找到”在您的链接上

【解决方案7】：

这是我在阅读 @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);
});

【讨论】：

要在 boostrap 3.0.3 中工作，我必须修改事件名称： slid -> slid.bs.carousel ；和幻灯片 -> slide.bs.carousel
这不适用于 Bootstrap 4.1.3。需要进行哪些更改才能使其正常工作？

【解决方案8】：

不要对当前幻灯片进行加减运算，而是在 'slide' 事件上试试这个：

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

【讨论】：

这应该是真正的答案。
在 Bootstrap 3.0+ 中，事件被这样捕获：$('.carousel').on('slide.bs.carousel', function (e) { // do something… })
在Boostrap 3.0+中，和$(e.relatedTarget).index();一样，如何找到之前的目标？表示当前索引 -1？

【解决方案9】：

我就是这样做的，效果很好;)

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

【讨论】：