Возникла необходимость определить листанице в 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();
}
}
