Question

How can you tell whether the twitter bootstrap carousel is going fwd or back? I want to be able to do something like:

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

Answer 1

The only special info the Carousel plugin appends to the slide event object is a relatedTarget property which contains the element that is going to be switched to. That can be used to manually calculate where you are about 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 is to handle the strange behavior I saw when on the last slide and moving to the first one. For some reason, activePos and nextPos come out equal. I can’t make sense of it; it just is.

Here’s a demo:

JSFiddle