Mobile слайдер реагирует только на первый свайп, а последующие игнорирует

Question

При данном коде имеется проблема: кнопками переключаются все три слайда по очереди, а вот свайпы вправо/влево применяются только к первому слайду - второй и третий на них не реагируют. Интересует решение на чистом JS, без библиотек.

const sliderContainerMob = document.querySelector('.slides-mob');
const slidesMob = document.querySelectorAll('.slide-mob');
const prevButtonMob = document.querySelector('.prev-btn-mob');
const nextButtonMob = document.querySelector('.next-btn-mob');

let slideIndexMob = 0;
let touchStartXMob = 0;
let touchEndXMob = 0;

function updateSliderMob() {
  sliderContainerMob.style.transform = `translateX(${-slideIndexMob * 100}%)`;
}

nextButtonMob.addEventListener('click', () => {
  if (slideIndexMob < slidesMob.length - 1) {
    slideIndexMob++;
  } else {
    slideIndexMob = 0;
  }
  updateSliderMob();
});

prevButtonMob.addEventListener('click', () => {
  if (slideIndexMob > 0) {
    slideIndexMob--;
  } else {
    slideIndexMob = slidesMob.length - 1;
  }
  updateSliderMob();
});

sliderContainerMob.addEventListener('touchstart', (e) => {
  touchStartXMob = e.touches[0].clientX;
});

sliderContainerMob.addEventListener('touchend', (e) => {
  touchEndXMob = e.changedTouches[0].clientX;
  const diffSlMob = touchEndXMob - touchStartXMob;

  if (Math.abs(diffSlMob) > 50) {
    if (diffSlMob > 0) {
      prevButtonMob.click();
    } else {
      nextButtonMob.click();
    }
  }
});

<div class="slider-mob">
  <div class="slides-mob">
    <div class="slide-mob">Slide1</div>
    <div class="slide-mob">Slide2</div>
    <div class="slide-mob">Slide3</div>
  </div>
  <button class="prev-btn-mob">Prev</button>
  <button class="next-btn-mob">Next</button>
</div>

БЛОГ НА HUSL

Mobile слайдер реагирует только на первый свайп, а последующие игнорирует

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