Twitter Bootstrap Carousel - access current index

How do I get the current index from the carousel?

In this case I am using an unordered list. I know I could search through the list items to find the one with the 'active' CSS class, but I want to know if I can ask the carousel object directly.

Additional: being able to access the target index (on 'slide' event) would be handy also. Again, I can do this by searching with:

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

...and then adding/subtracting based on direction, but I am hoping for something cleaner.

Answers:

Answer

Nope, there is no way to access index or direction.

See here

// EDIT

Bootstrap changed repos, new link

Answer

Instead of adding and subtracting from the current slide, try this on the 'slide' event:

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

This worked for me (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

For bootstrap 3 it's

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

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

Answer

It appears Bootstrap 4 finally has the native implementation of this.

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

$(".active", e.target).index() works. Where e from:

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

Found on: https://github.com/twitter/bootstrap/pull/2404#issuecomment-4589229

Answer

I'm doing it like that, that works sort of very well ;)

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

Here's what I came up with after reading fat's comment in @Quelltextfabrik's answer.

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

I was able to access the slide index using a jquery function from the bootstrap documentation.

$('#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 on the event will give you the slide where the slide instance occurs. .to will give you the slide where the slide instance is going to. Using slide.bs.carousel will execute the function before the slide animation, slid.bs.carousel will execute the function after the slide animation but the returned slide number will be the same.

There's a few other properties that the slide and slid events give you access to, I recommend checking them out on the carousel documentation page.

Note: I am using bootstrap 4.3.1.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.