Include from and to indexes in Carousel slide event

[jimmydo]

The slide event callback will now receive the indexes of the items that the carousel is transitioning from and to as the second and third arguments, respectively.

Example:

someCarousel.bind('slide', function (event, fromIndex, toIndex) {
...
});

I chose to pass the indexes instead of the actual DOM elements, to be consistent with the .carousel(number) function, which uses a zero-based index to the desired carousel item.

This should also address issue #2240.

[ibrent]

Is there a way to retrieve the current slide number - the position of the one which is being displayed?
Something like $('#myCarousel').currentSlide;

Thx !

[fat]

@Librent there's no internal state for slide position in the carousel - however

$('#myCarousel .active').index('#myCarousel .item')

would be the current active slide number.

[fat]

Not crazy about adding extra response args with these events. We've been trying to keep events very close to native event expectations - only using real event property names - and only returning a single event argument. (this is why we've used keycode and relatedTarget in other places.)

[ibrent]

Perfect. This will work great. Thank you.

On Mar 19, 2012, at 10:01 PM, Jacob Thornton reply@reply.github.com wrote:

@Librent there's no internal state for slide position in the carousel - however

$('#myCarousel .active').index('#myCarousel .item')` 

would be the current active slide number.

---

Reply to this email directly or view it on GitHub:
#2404 (comment)

[cambridgemike]

Is there a guarantee that fetching $("#myCarousel .active") inside the "slid" event, will indeed return the slide that was just.. slid to?

For instance
<div id="myCarousel"> <div class="item" id="A"></div> <div class="item" id="B"></div> </div>

 $("#myCarousel").carousel()
 $("#myCarousel").bind("slid", function(){
    alert( $("#myCarousel .active").attr('id') )
  })

Will alert "B" after the transition from A->B?

[dardub]

The example given:

$('#myCarousel .active').index('#myCarousel .item')

Will only return the from slide index. How do we return the to slide index?

[howdu]

This works for me $(".active", e.target).index()

I was able to make the slider remember the last visible slide, then show the next slide on next load

$(".carousel").on('slid', function(e){  
    localStorage.setItem('last_slide', 
        // join active slide index with carousel ID 
        $(".active", e.target).index() + "#" + e.target.id
    );
});

var lastSlide = localStorage.getItem('last_slide');    
if (lastSlide) {
    lastSlide = lastSlide.split("#");
    $("#"+lastSlide[1]).carousel(parseInt(lastSlide[0], 10)+1);
}

[furf]

As of 3.0.0-rc1, the following works to access active element, next element, from index, to index, and slide direction. Feel free to decrease specificity of your selectors as needed.

carousel.on('slide.bs.carousel', function (event) {

  var active = $(event.target).find('.carousel-inner > .item.active');
  var from = active.index();
  var next = $(event.relatedTarget);
  var to = next.index();
  var direction = event.direction;

});

[andrezimpel]

$('.gallery-carousel').data("bs.carousel").getActiveIndex() works for me in 3.0.2 :)

[charl-kruger]

furf's example works best for me, thanks