jquery - 检测 Bootstrap 轮播是向前还是向后

Question

如何判断 twitter bootstrap 轮播是向前还是向后？我希望能够做这样的事情:

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

Answer 1

Carousel 插件附加到 slide 事件对象的唯一特殊信息是 latedTarget 属性，其中包含要切换到的元素。这可用于手动计算您将在轮播中移动的位置。

大致如下:

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

那个 diff === 0 是为了处理我在最后一张幻灯片上移动到第一张幻灯片时看到的奇怪行为。由于某种原因，activePos 和 nextPos 结果是相等的。我无法理解它；它只是是。

这是一个演示:

JSFiddle