Twitter Bootstrap轮播:获取幻灯片的方向 [英] Twitter Bootstrap carousel: get the direction of slide

问题描述

如何确定圆盘传送带是向左滑动还是向右滑动?我看过事件滑动和滑动的文档，但是都没有提供有关滑动方向的任何相关信息.

How can I determine whether the carousel is sliding left or right? I've looked at the documentation for the events slid and slide, but neither provide any relevant information on the direction of the slide.

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

I've also examined the event object that gets passed to the event handler for the slid event, but I can't seem to find any useful clues there either.

任何帮助将不胜感激！

推荐答案

据我所知，twitter引导程序并未通过事件对象公开轮播的移动方向.但是，它确实向幻灯片中涉及的元素添加了右"或左"类.

So as far as I can see twitter bootstrap doesn't expose what direction the carousel is moving via the event object. However, it DOES add a "right" or "left" class to elements involved in the slide.

所以基本上我看到2个选项.在事件对象中公开方向，或在元素上寻找左右类.

So basically i see 2 options. Expose the direction in the event object or look for the right or left class on the elements.

选项1:

您将必须修改引导轮播代码.在轮播中，滑动功能更改:

You will have to modify the bootstrap carousel code. In the carousel, slide function change:

e = $.Event('slide')

到

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

(在bootstrap.js的普通版中，在337-340行附近)

(around line 337-340 in the normal version of bootstrap.js)

然后您可以通过以下方式获得指导:

and then you can get the direction with something like this:

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

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

或选项2:

等待一段时间，将CSS的左"或右"类添加到元素中，然后检查该类是否存在.

Wait some time for the css "left" or "right" class to be added to the element and then check if that class is present.

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);
});

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

Need the timeout because there is a race condition between when the event is triggered and when the left right classes are set. Obviously this is a hackyer solution, but you don't have to modify the bootstrap code. There are probably other options too, but i feel option 1 is the best.

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

In the latest version of bootstrap css (2.1.1) The line change for option 1 would be:

(第340行) 来自:

(line 340) from:

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

收件人:

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

这篇关于Twitter Bootstrap轮播:获取幻灯片的方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！