Как на JS реализовать «адаптивный слайдер» (carousel) без сторонних библиотек с поддержкой свайпов на мобильных устройствах?

Реализация адаптивного слайдера (carousel) на чистом JavaScript — задача, которая отлично прокачивает понимание DOM, CSS-трансформаций и touch-событий. Разберём пошагово.

## 1. HTML-структура

html

## 2. CSS-основа

css
.slider { position: relative; overflow: hidden; width: 100%; }
.slider__track { display: flex; transition: transform 0.4s ease; will-change: transform; }
.slider__slide { min-width: 100%; box-sizing: border-box; }
.slider__btn { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; }
.slider__btn—prev { left: 10px; }
.slider__btn—next { right: 10px; }

## 3. JavaScript — ядро слайдера

javascript
class Slider {
constructor(selector) {
this.slider = document.querySelector(selector);
this.track = this.slider.querySelector(‘.slider__track’);
this.slides = Array.from(this.track.children);
this.current = 0;
this.total = this.slides.length;
this.startX = 0;
this.isDragging = false;

this._bindEvents();
this._createDots();
this._update();
}

goTo(index) {
this.current = (index + this.total) % this.total;
this._update();
}

_update() {
this.track.style.transform = `translateX(-${this.current * 100}%)`;
this._updateDots();
}

_bindEvents() {
this.slider.querySelector(‘.slider__btn—prev’)
.addEventListener(‘click’, () => this.goTo(this.current — 1));
this.slider.querySelector(‘.slider__btn—next’)
.addEventListener(‘click’, () => this.goTo(this.current + 1));

// Touch-события
this.track.addEventListener(‘touchstart’, e => {
this.startX = e.touches[0].clientX;
this.isDragging = true;
}, { passive: true });

this.track.addEventListener(‘touchend’, e => {
if (!this.isDragging) return;
const diff = this.startX — e.changedTouches[0].clientX;
if (Math.abs(diff) > 50) this.goTo(this.current + (diff > 0 ? 1 : -1));
this.isDragging = false;
});

// Поддержка мыши (drag)
this.track.addEventListener(‘mousedown’, e => {
this.startX = e.clientX;
this.isDragging = true;
});
this.track.addEventListener(‘mouseup’, e => {
if (!this.isDragging) return;
const diff = this.startX — e.clientX;
if (Math.abs(diff) > 50) this.goTo(this.current + (diff > 0 ? 1 : -1));
this.isDragging = false;
});
}

_createDots() {
const container = this.slider.querySelector(‘.slider__dots’);
this.dots = this.slides.map((_, i) => {
const dot = document.createElement(‘button’);
dot.addEventListener(‘click’, () => this.goTo(i));
container.appendChild(dot);
return dot;
});
}

_updateDots() {
this.dots.forEach((d, i) => d.classList.toggle(‘active’, i === this.current));
}
}

const slider = new Slider(‘.slider’);

## 4. Автопрокрутка

javascript
setInterval(() => slider.goTo(slider.current + 1), 4000);

## Ключевые моменты

— **`{ passive: true }`** в touchstart ускоряет прокрутку страницы на мобильных.
— **`will-change: transform`** подсказывает браузеру заранее создать слой для анимации.
— Порог свайпа в 50px предотвращает случайные переключения.
— Класс позволяет легко создавать несколько независимых слайдеров на странице.

Такой слайдер работает на всех современных браузерах, не требует зависимостей и легко расширяется под любые дизайн-требования.