如何在 Slick Carousel onBeforeChange 中检测滑动方向？答案

【问题标题】：How to detect slide direction in Slick Carousel onBeforeChange?如何在 Slick Carousel onBeforeChange 中检测滑动方向？
【发布时间】：2015-02-11 09:14:16
【问题描述】：

我如何知道旋转木马在活动onBeforeChange 中的方向。向右还是向左？

    $('.foo').slick
        infinite: false
        onBeforeChange: (e) ->
            if right
                do_this()
            if left
                do_that()

Slick Carousel

【问题讨论】：

标签： jquery carousel direction

【解决方案1】：

beforeChange 事件让您可以访问 currentSlide 和 nextSlide 值。

它也适用于无限滑块。

所以，代码是：

$(".some-element").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  if (Math.abs(nextSlide - currentSlide) == 1) {
    direction = (nextSlide - currentSlide > 0) ? "right" : "left";
  }
  else {
    direction = (nextSlide - currentSlide > 0) ? "left" : "right";
  }
});

【讨论】：

遗憾的是，这不适用于无限滑块。从第一张到最后一张幻灯片，方向应该是左；上面代码的结果是对的。
很好的答案:)
它确实适用于无限滑块。我刚刚测试过

【解决方案2】：

这就是我最终要做的。它可能可以写得更简单，但它确实有效。这是在beforeChange 事件期间调用的。这适用于无限滚动。

if (currentSlide === 0 && nextSlide === slick.$slides.length - 1) {
    // its going from the first slide to the last slide (backwards)
    direction = 'prev';
} else if (nextSlide > currentSlide || (currentSlide === (slick.$slides.length - 1) && nextSlide === 0 )) {
    // its either going normally forwards or going from the last slide to the first
    direction = 'next';
} else {
    direction = 'prev';
}

【讨论】：

请注意它不适用于默认的“slidesToScroll”选项。要解决此问题，您需要将“1”更改为与“slidesToScroll”中相同的计数。因此，如果您有“slidesToScroll: 3”，请将“slick.$slides.length - 1”更改为“slick.$slides.length - 3”

【解决方案3】：

你要问元素是否有dir属性并设置为rtl

    var attr = $('.foo').attr('dir');
    if (typeof attr !== typeof undefined && attr !== false && attr === 'rtl') {
      do_this()
    } else {
      do_that()
    }

【讨论】：

attr 上的 console.log 打印什么？

【解决方案4】：

当 beforeChange 事件触发时，这对我有用。

var dir;
if((currentSlide<nextSlide&&currentSlide==nextSlide-1)||(currentSlide==slick.slideCount-1&&nextSlide==0))
      {
           dir='right';
      }
else if(nextSlide<currentSlide||(nextSlide==slick.slideCount-1&&currentSlide==0))
      {
         dir='left';
      }
if(dir=='right')
{
//do something.
}
if(dir=='left')
{
//do something.
}

【讨论】：

【解决方案5】：

beforeChange 事件处理程序接受 currentSl、ide 和 nextSlide 参数

$(el).slick().on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    if(currentSlide < nextSlide){
        console.log('forward');
    } else{
        console.log('back');
    }
});

【讨论】：

我也这么认为，但不幸的是，当轮播循环时，这将不起作用，因为 nextSlide 会小于 currentSlide。
或者当您尝试拖动幻灯片并在中间停止时。然后 currentslide == 下一张幻灯片