Не работает вертикальный свайп на телефоне

Столкнулся с такой проблемой: Есть скрипт на свайп в стороны, все хорошо работает на ПК, но с мобильного устройства скролл перестает работать на данном блоке, т.к. все время пытается сделать свайп в сторону, и страницу невозможно больше скроллить Подскажите, пожалуйста, каким образом можно устранить данную проблему на Мобильных устройствах?

Скрипт:

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

Ответы (0 шт):