Не работает вертикальный свайп на телефоне
Столкнулся с такой проблемой: Есть скрипт на свайп в стороны, все хорошо работает на ПК, но с мобильного устройства скролл перестает работать на данном блоке, т.к. все время пытается сделать свайп в сторону, и страницу невозможно больше скроллить Подскажите, пожалуйста, каким образом можно устранить данную проблему на Мобильных устройствах?
Скрипт:
class Slideshow {
constructor(slider) {
this.slider = slider;
this.sliderContainer = slider.getElementsByClassName('slides')[0];
this.next = slider.querySelector('.control.next');
this.prev = slider.querySelector('.control.prev');
this.posX1 = 0;
this.posX2 = 0;
this.posInitial = null;
this.posFinal = null;
this.threshold = 100;
this.slides = this.sliderContainer.getElementsByClassName('slide');
this.slidesLength = this.slides.length;
this.slideSize = this.slides[0].offsetWidth;
this.firstSlide = this.slides[0];
this.lastSlide = this.slides[this.slidesLength - 1];
this.cloneFirst = this.firstSlide.cloneNode(true);
this.cloneLast = this.lastSlide.cloneNode(true);
this.index = 0;
this.allowShift = true;
this.boundDragAction = this.dragAction.bind(this);
this.boundDragEnd = this.dragEnd.bind(this);
this.sliderContainer.addEventListener('mousedown', this.dragStart.bind(this));
this.sliderContainer.addEventListener('touchstart', this.dragStart.bind(this));
this.sliderContainer.addEventListener('touchend', this.dragEnd.bind(this));
this.sliderContainer.addEventListener('touchmove', this.dragAction.bind(this));
this.next.addEventListener('click', e => this.shiftSlide(1) || e.preventDefault());
this.prev.addEventListener('click', e => this.shiftSlide(-1) || e.preventDefault());
this.sliderContainer.addEventListener('transitionend', this.checkIndex.bind(this));
this.slide();
}
slide() {
this.cloneSlides();
}
cloneSlides() {
this.sliderContainer.appendChild(this.cloneFirst);
this.sliderContainer.insertBefore(this.cloneLast, this.firstSlide);
this.slider.classList.add('loaded');
}
dragStart(event) {
event = event || window.event;
event.preventDefault();
this.posInitial = this.sliderContainer.offsetLeft;
if (event.type === 'touchstart') {
this.posX1 = event.touches[0].clientX;
} else {
this.posX1 = event.clientX;
document.addEventListener('mouseup', this.boundDragEnd);
document.addEventListener('mousemove', this.boundDragAction);
}
}
dragAction(event = window.event) {
if (event.type === 'touchmove') {
this.posX2 = this.posX1 - event.touches[0].clientX;
this.posX1 = event.touches[0].clientX;
} else {
this.posX2 = this.posX1 - event.clientX;
this.posX1 = event.clientX;
}
this.sliderContainer.style.left = (this.sliderContainer.offsetLeft - this.posX2) + "px";
}
dragEnd(ev) {
this.posFinal = this.sliderContainer.offsetLeft;
if (this.posFinal - this.posInitial < -this.threshold) {
this.shiftSlide(1, 'drag');
} else if (this.posFinal - this.posInitial > this.threshold) {
this.shiftSlide(-1, 'drag');
} else {
this.sliderContainer.style.left = (this.posInitial) + "px";
}
document.removeEventListener('mouseup', this.boundDragEnd);
document.removeEventListener('mousemove', this.boundDragAction);
}
shiftSlide(dir, action) {
this.sliderContainer.classList.add('shifting');
if (this.allowShift) {
if (!action) {
this.posInitial = this.sliderContainer.offsetLeft;
}
if (dir === 1) {
this.sliderContainer.style.left = (this.posInitial - this.slideSize) + "px";
this.index++;
} else if (dir === -1) {
this.sliderContainer.style.left = (this.posInitial + this.slideSize) + "px";
this.index--;
}
};
this.allowShift = false;
}
checkIndex() {
this.sliderContainer.classList.remove('shifting');
if (this.index === -1) {
this.sliderContainer.style.left = -(this.slidesLength * this.slideSize) + "px";
this.index = this.slidesLength - 1;
}
if (this.index === this.slidesLength) {
this.sliderContainer.style.left = -(1 * this.slideSize) + "px";
this.index = 0;
}
this.allowShift = true;
}
}
window.addEventListener('load', function() {
const sliderElements = document.getElementsByClassName('slider');
[...sliderElements].forEach((slide) => {
new Slideshow(slide);
})
})