Twitter Bootstrap走马灯：获取滑动方向

Question

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

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

非常感谢您的帮助！

- William

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;

});

- furf

---

非常好的答案！谢谢！ - Sergey Fedirko

Answer 2

据我所见，Twitter Bootstrap并没有通过事件对象公开旋转木马（carousel）的移动方向。但是，在幻灯片中使用了“right”或“left”类来标识参与滑动的元素。

因此，基本上有两个选择：在事件对象中公开方向，或查找元素中的右侧或左侧类。

选项1：您必须修改Bootstrap Carousel代码。在Carousel.js文件中，需要更改Slide函数的代码：

e = $.Event('slide')

to

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 解决方案，但您不必修改 bootstrap 代码。可能还有其他选项，但我认为选项 1 是最好的。

编辑：在最新版本的 bootstrap css（2.1.1）中，选项 1 的行更改如下：

(第 340 行) 从：

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

to:

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

- hajpoj

---

以防万一有人偶然发现这个旧问题——这似乎不再是现实。'slide'事件现在包含方向信息。 - Spencer Ruskin

请问您能否更新一下您的答案，以适应Bootstrap版本3.1.1？ - Crisan Raluca Teodora

Answer 3

对于 Twitter Bootstrap 3：

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

- paulalexandru