Detect whether the boot carousel will move forward or backward

Question

How can you tell if twitter bootstrap carousel will go forward or backward? I want to be able to do something like:

$('#myCarouse').on('slide', function(e) { if (fwd?) {do something} }); 

Answer 1

The only special information that the Carousel plugin adds to the slide event object is the relatedTarget property, which contains the element that will be switched to. This can be used to calculate manually where you are going to move in the carousel.

Something along the lines of:

 $('#myCarousel').on('slide', function (e) { var $active = $(this).find('.item.active') , children = $active.parent().children() , activePos = children.index($active) , nextPos = children.index(e.relatedTarget) , diff = nextPos - activePos; if (diff === 1 || diff < -1 || diff === 0) { console.log('next'); } else { console.log('prev'); } });​ 

That diff === 0 should handle the weird behavior that I saw when on the last slide and going to the first. For some reason, activePos and nextPos are given equal. I can't figure it out; it's simple.

Here is a demo:

Jsfiddle