Как центрировать активный слайд?

Как можно улучшить обработку событий в данном коде, чтобы избежать возможных ошибок, таких как при свайпе? Ссылка на текущий код: https://jsbin.com/bezihalawu/2/edit?html,output
  • 28 мая 2024 г. 12:31
Ответы на вопрос 1
Для центрирования активного слайда можно использовать CSS свойство `justify-content: center` для контейнера слайдов. Пример:

```css
.slider {
  display: flex;
  justify-content: center;
}
```

Чтобы улучшить обработку событий в коде, можно добавить условия для проверки направления свайпа и корректного перемещения слайдов. Например, можно добавить проверку на расстояние свайпа (чтобы он не был слишком маленьким) и на направление движения пальца (горизонтальное или вертикальное). Также можно добавить проверку на текущий активный слайд, чтобы не позволить пользователю свайпать влево, если активный слайд уже первый, и наоборот. 

Вот пример улучшенной обработки событий в коде:

```javascript
let startX = 0;
let startY = 0;

slider.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

slider.addEventListener('touchmove', (e) => {
  let endX = e.touches[0].clientX;
  let endY = e.touches[0].clientY;

  let diffX = startX - endX;
  let diffY = startY - endY;

  if (Math.abs(diffX) > Math.abs(diffY)) {
    if (diffX > 0) {
      // свайп влево
      if (activeIndex < slides.length - 1) {
        moveToSlide(activeIndex + 1);
      }
    } else {
      // свайп вправо
      if (activeIndex > 0) {
        moveToSlide(activeIndex - 1);
      }
    }
  }
});
```

Эти изменения помогут улучшить обработку событий и предотвратить возможные ошибки при свайпе.
Похожие вопросы