jquery - Twitter Bootstrap 轮播：获取幻灯片的方向

Question

如何确定轮播是向左滑动还是向右滑动？我查看了事件幻灯片和幻灯片的文档，但都没有提供有关幻灯片方向的任何相关信息。

我还检查了传递给滑动事件的事件处理程序的事件对象，但我似乎也找不到任何有用的线索。

任何帮助，将不胜感激！

Answer 1

从 3.0.0-rc1 开始，以下工作可以访问活动元素、下一个元素、从索引到索引和滑动方向。根据需要随意降低选择器的特异性。

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;

});

Answer 2

因此，据我所知，twitter bootstrap 并没有显示轮播通过事件对象移动的方向。但是，它确实为幻灯片中涉及的元素添加了“右”或“左”类。

所以基本上我看到了 2 个选项。在事件对象中暴露方向或在元素上查找右类或左类。

选项1：

您将不得不修改引导轮播代码。在轮播中，滑动功能变化：

e = $.Event('slide')

至

e = $.Event('slide', {direction: direction})

（在 bootstrap.js 的普通版本中的第 337-340 行附近）

然后您可以通过以下方式获得方向：

var $carousel = $('.carousel');
$carousel.carousel();

$carousel.bind('slide', function(e) {
  console.log("e.direction = " + e.direction);
});

或选项 2：

等待一段时间，将 css “left” 或 “right” 类添加到元素中，然后检查该类是否存在。

var $carousel = $('.carousel');
$carousel.carousel();

$carousel.bind('slide', function(e) {

  setTimeout( function(){
    var left = $carousel.find('.item.active.left');
    var right = $carousel.find('.item.active.right');
    if(left.length > 0) {
      console.log('left');
    }
    else if(right.length > 0) {
      console.log('right');
    }
  }, 500);
});

需要超时，因为在触发事件和设置左右类之间存在竞争条件。显然这是一个 hackyer 解决方案，但您不必修改引导代码。可能还有其他选择，但我觉得选项 1 是最好的。

编辑：在最新版本的 bootstrap css (2.1.1) 中，选项 1 的行更改为：

（第 340 行）来自：

, e = $.Event('slide', {
  relatedTarget: $next[0]
})

至：

, e = $.Event('slide', {
  relatedTarget: $next[0],
  direction: direction
});

Answer 3

For twitter bootstrap 3 :

$('#myCarousel').on('slide.bs.carousel', function (event) {
    alert(event.direction);
});