Slick, как определить направление перелистывания слайдеров?

Question

[Tony C.]

Всем привет!
Подскажите, как в слике можно определить направление в котором юзер листает слайды (left to right или right to left)? Для чего это нужно: настроена анимация содержимого слайда, и при обратном перелистывании надо настроить анимацию в обратную сторону :)
Заранее спасибо.

Answer 1

[Murat Atila]

Там же в апи всё написано
дока
Прочтите раздел Events

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

Comments

[Tony C.]

Я в курсе об ивентах, с помощью afterChange и beforeChange анимировал контент в слайде.
Не понимаю, какой из ивентов поможет определить направление forwards/backwards?

[Дмитрий Фоминых]

Tantbpv: а если 'infinite: true' ?

Answer 2

[Иван Свидинский]

Возникла необходимость определить листанице в slick slider. Не все так просто, как кажется.
Поэтому дополню от себя.

Во-первых, событие 'swipe' — срабатывает когда только свайпаешь, если используется листание стрелками, то данное событие, которое это дело удобно показывает уже использовать не получится.

Во-вторых, событе 'edge', довольно специфично в использование и вряд ли понадобится. Подробнее можно посмотреть здесь https://stackoverflow.com/questions/31432293/slick...

Остается 'beforeChange', есть еще 'afterChange', но оно не содержит аргумента nextSlide.
Поэтому в своем случае остановился на 'beforeChange'.

По аргументам currentSlide, nextSlide и опции slick.options.slidesToShow - нужно определить куда происходит пролистывание.
Сделал это следующим образом для случая, когда пролистывается более одного элемента за раз:

Направление листания и дельта = currentSlide — nextSlide

Right
0 → 4 4-0=4
4 → 8 8-4=4
8 → 0 0-8=-8

Left
0 → 8 8-0=8
8 → 4 4-8=-4
4 → 0 0-4=-4

Строим функцию:

slickBeforeChange(slick, currentSlide, nextSlide) {
        this.currentSlide = currentSlide;
        this.nextSlide = nextSlide;
        this.slidesToShow = slick.options.slidesToShow;
        this.changePagination();
    }

changePagination() {
        let delta = this.nextSlide - this.currentSlide,
            position;
        if (delta > 0) {
            if (delta === this.slidesToShow) {
                position = 'right';
            } else {
                position = 'left';
            }
        } else {
            if (Math.abs(delta) ===this.slidesToShow) {
                position = 'left';
            } else {
                position = 'right';
            }
        }
        this.setDirection(position);
    }

P.S. Универсальный вариант для разных разрещений (так как currentSlide, nextSlide будут разные). Необходимо, чтобы было загружено как минимум три пролистывания. Для вариант когда пролистывается более одного элемента за раз. Если есть вариант проще для события 'beforeChange' хотелось бы посмотреть.

Полный код в виде класса:

const ssDirection = $("#sliderLastDirection"); // скрытий инпут куда записываю текущее листание для последующего использования

class AjaxSlider {

    getDirection() {
        return ssDirection.val();
    }

    setDirection(value) {
        ssDirection.val(value);
    }

    get currentSlide() {
        return parseInt(this._currentSlide, 10);
    }

    set currentSlide(value) {
        this._currentSlide = value;
    }

    get nextSlide() {
        return parseInt(this._nextSlide, 10);
    }

    set nextSlide(value) {
        this._nextSlide = value;
    }

    get slidesToShow() {
        return parseInt(this._slidesToShow, 10);
    }

    set slidesToShow(value) {
        this._slidesToShow = value;
    }

    changePagination() {
        let delta = this.nextSlide - this.currentSlide,
            position;
        if (delta > 0) {
            if (delta === this.slidesToShow) {
                position = 'right';
            } else {
                position = 'left';
            }
        } else {
            if (Math.abs(delta) ===this.slidesToShow) {
                position = 'left';
            } else {
                position = 'right';
            }
        }
        this.setDirection(position);
    }

    slickBeforeChange(slick, currentSlide, nextSlide) {
        this.currentSlide = currentSlide;
        this.nextSlide = nextSlide;
        this.slidesToShow = slick.options.slidesToShow;
        this.changePagination();
    }
}