Question

我如何知道轮播在事件onBeforeChange上的发展方向。向右还是向左？

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

Slick Carousel

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

Answer 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';
}

Answer 3

你必须询问该元素是否具有dir属性并且设置为rtl

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

Answer 4

这在无限时适用于我：当beforeChange事件触发时为true。

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.
}

Answer 5

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

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

如何检测Slick Carousel onBeforeChange中的滑动方向？

5 个答案: