Twitter Bootstrap Carousel - access current index

Question

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.

score 74 · Answer 1 · answered Feb 01 '13 at 18:29

74

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

answered Feb 01 '13 at 18:29

Kyle

2,645
3
21
8

6

This should really be the answer. – Derek Sep 18 '13 at 21:19
14

In Bootstrap 3.0+ the event is catched like this: `$('.carousel').on('slide.bs.carousel', function (e) { // do something… })` – Muleskinner Dec 15 '14 at 13:12
In Boostrap 3.0+, just like `$(e.relatedTarget).index();`, how can I find the previous target? Meaning the current index -1? – Neel Jan 12 '17 at 21:44

score 21 · Answer 2 · answered Sep 09 '13 at 02:58

21

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

answered Sep 09 '13 at 02:58

Dave Sag

13,266
14
86
134

worked best with Bootstrap 4 also in mid April, 2020 – ArifMustafa Apr 19 '20 at 07:45

Quv · Answer 3 · 2018-04-12T13:31:32.303

20

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

edited Apr 12 '18 at 13:31

answered Feb 25 '18 at 14:19

Quv

2,958
4
33
51

Perfect answer! – vikas0713 Oct 09 '18 at 07:24

Valentin Klinghammer · Accepted Answer · 2013-08-01T07:05:27.647

12

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

See here

// EDIT

Bootstrap changed repos, new link

edited Aug 01 '13 at 07:05

answered Apr 10 '12 at 14:16

Valentin Klinghammer

1,319
1
13
19

14

This link suggests `$(".active", e.target).index()` which seems to work well. – Bass Jobsen Jun 06 '13 at 12:54
"Page not found" on your link – Sergey Metlov Jul 31 '13 at 21:55

score 11 · Answer 5 · edited Dec 11 '19 at 17:48

11

$(".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

edited Dec 11 '19 at 17:48

jyoseph

5,435
9
45
64

answered Jun 06 '13 at 12:53

Bass Jobsen

48,736
16
143
224

score 11 · Answer 6 · answered Nov 30 '13 at 20:01

11

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

answered Nov 30 '13 at 20:01

Shaun Dychko

825
1
9
11

Short version would be: var to = $(e.relatedTarget).index() – pensan Jul 13 '16 at 08:37

score 7 · Answer 7 · answered Apr 13 '12 at 16:17

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

score 2 · Answer 8 · answered Jul 08 '19 at 21:50

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.

actual solution that works out of the box. no need for complex queries — Alex, Nov 10 '21 at 11:33

JackMorrissey · Answer 9 · 2013-03-26T16:24:35.300

1

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

edited Mar 26 '13 at 16:24

answered Mar 26 '13 at 15:53

JackMorrissey

2,567
2
21
18

2

To work in boostrap 3.0.3, I had to modify the event names: slid -> slid.bs.carousel ; and slide -> slide.bs.carousel – cobberboy Dec 09 '13 at 05:49
This does not work for Bootstrap 4.1.3.What changes would be necessary for it to work? – Razvan Zamfir Oct 02 '19 at 08:28

Twitter Bootstrap Carousel - access current index

9 Answers9

Linked