How to detect slide direction in Slick Carousel onBeforeChange?

Question

How can I know what direction the carousel are going on the event onBeforeChange. right or left?

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

Slick Carousel

Massimiliano

Answer 1

beforeChange event get you an access to currentSlide and nextSlide values.

It works for infinite sliders too.

So, the code is:

$(".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";
  }
});

Stool

This doesn't work for infinite slider sadly. Going from the first to the last slide the direction should be left; result of the code above is right. – Hermilahermina

Great answer :) – Mesothorax

It does work for inifnite slider. I just tested it – Molasses

Answer 2

This is what I ended up doing. It can probably be written simpler, but it works. This is called during the beforeChange event. This works for infinite scroll.

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

Anisette

Please mention that it doesn't work with default "slidesToScroll" option. To fix this you need to change "1" to same count as you have in "slidesToScroll". So if you have "slidesToScroll: 3" change "slick.$slides.length - 1" to "slick.$slides.length - 3" – Morass

Answer 3

this works for me when infinite:true when beforeChange event triggers.

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

Theresa

Answer 4

you have to ask if the element has the dir attribute and is set to rtl

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

Difficult

what does a console.log on attr prints? – Difficult

Answer 5

beforeChange event handlers accept currentSl,ide and nextSlide arguments

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

Watt

I had thought the same, but unfortunately this won't work when the carousel loops, as the nextSlide would be less than the currentSlide. – Nutmeg

or when you attempt to drag slides and stop in the middle. then currentslide == next slide – Zoophilous