Создаём слайдер на чистом JavaScript: от нуля до готового компонента

Хотите добавить на сайт карусель изображений, но не хотите тянуть за собой тяжёлые библиотеки? Создание слайдера на чистом JavaScript — это отличный способ прокачать свои навыки фронтенд-разработчика, получить полный контроль над кодом и создать лёгкий, быстрый компонент, идеально вписывающийся в ваш проект. Давайте разберём этот процесс от идеи до реализации.

Зачем писать слайдер самому?

Библиотеки вроде Slick или Swiper — это мощные инструменты, но они часто содержат избыточный для простых задач функционал. Нативный JS даёт вам:

• Минимальный вес: Десятки килобайт против нескольких сотен строк вашего кода.
• Полную кастомизацию: Вы контролируете каждую анимацию, каждый обработчик события.
• Глубокое понимание: Вы узнаете, как на самом деле работают подобные UI-компоненты.
• Отсутствие зависимостей: Ваш слайдер будет работать всегда, независимо от обновлений сторонних пакетов.

Структура проекта: HTML и CSS

Сначала создадим каркас. Нам понадобится контейнер, обёртка для слайдов и сами слайды.

Базовая разметка

Код HTML будет предельно простым:

<div class=\"slider\" id=\"mySlider\">
    <div class=\"slider__wrapper\">
        <div class=\"slider__slide\"><img src=\"slide1.jpg\" alt=\"\"></div>
        <div class=\"slider__slide\"><img src=\"slide2.jpg\" alt=\"\"></div>
        <div class=\"slider__slide\"><img src=\"slide3.jpg\" alt=\"\"></div>
    </div>
    <button class=\"slider__btn slider__btn--prev\">&lt;</button>
    <button class=\"slider__btn slider__btn--next\">&gt;</button>
    <div class=\"slider__dots\"></div>
</div>

Ключевые стили

В CSS самое важное — это правило для .slider__wrapper, которое будет сдвигаться. Мы используем flexbox или transform: translateX для плавной анимации.

.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.slider__wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.slider__slide {
    flex: 0 0 100%; /* Каждый слайд на всю ширину */
    min-width: 0;
}
.slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.slider__btn--prev { left: 10px; }
.slider__btn--next { right: 10px; }

Оживляем слайдер: JavaScript

Теперь сердце нашего компонента. Разобьём логику на этапы.

1. Инициализация и переменные

class SimpleSlider {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.wrapper = this.container.querySelector('.slider__wrapper');
        this.slides = Array.from(this.wrapper.children);
        this.currentIndex = 0;
        this.totalSlides = this.slides.length;
        this.initButtons();
        this.initDots();
        this.updateSlider();
    }
    // ... методы класса
}

2. Логика переключения слайдов

Основной метод — изменение transform: translateX у обёртки. Смещение вычисляется как -текущий_индекс * 100%.

goToSlide(index) {
    // Зацикливание слайдов
    if (index >= this.totalSlides) this.currentIndex = 0;
    else if (index < 0) this.currentIndex = this.totalSlides - 1;
    else this.currentIndex = index;

    const offset = -this.currentIndex * 100;
    this.wrapper.style.transform = `translateX(${offset}%)`;
    this.updateDots(); // Обновляем индикаторы
}

3. Кнопки и индикаторы

Добавим обработчики для кнопок "вперёд/назад" и создадим точки-индикаторы.

initButtons() {
    const prevBtn = this.container.querySelector('.slider__btn--prev');
    const nextBtn = this.container.querySelector('.slider__btn--next');
    prevBtn.addEventListener('click', () => this.goToSlide(this.currentIndex - 1));
    nextBtn.addEventListener('click', () => this.goToSlide(this.currentIndex + 1));
}

initDots() {
    const dotsContainer = this.container.querySelector('.slider__dots');
    this.slides.forEach((_, index) => {
        const dot = document.createElement('button');
        dot.classList.add('slider__dot');
        dot.addEventListener('click', () => this.goToSlide(index));
        dotsContainer.appendChild(dot);
    });
    this.dots = dotsContainer.querySelectorAll('.slider__dot');
}

4. Дополнительные улучшения

Чтобы слайдер был законченным, добавьте:

1. Автопрокрутку: `setInterval(() => this.next(), 5000)` с очисткой при наведении мыши.
2. Свайпы для мобильных: Обработка событий `touchstart`, `touchmove`, `touchend` для определения направления жеста.
3. Бесконечную ленту: Клонируйте первый и последний слайды для seamless-перехода.
4. Ленивую загрузку: Загружайте изображения только когда слайд приближается к области видимости.

Итог и дальнейшие шаги

Вы только что создали полностью функциональный, лёгкий и производительный слайдер. Такой подход учит вас работать с DOM, событиями и CSS-трансформациями на глубоком уровне. Экспериментируйте: добавьте fade-эффекты вместо сдвига, вертикальную прокрутку или переход по клавишам клавиатуры.

FAQ: Часто задаваемые вопросы

Сложно ли сделать слайдер на чистом JS?

Нет, это отличный проект для среднего уровня. Основная логика укладывается в 100-150 строк кода.

Что лучше: flexbox или transform для анимации?

Для плавности и производительности однозначно `transform: translateX()`. Flexbox может использоваться для базовой вёрстки контейнера.

Как добавить адаптивность?

Меняйте свойство `flex: 0 0 100%` у слайда через медиа-запросы. Например, для показа двух слайдов на планшете установите `flex: 0 0 50%`.

Почему слайдер "дёргается" при первом запуске?

Возможно, не загружены изображения. Используйте событие `window.onload` или задайте фиксированные размеры контейнеру.

Как реализовать бесконечную прокрутку?

Клонируйте первый и последний слайды, добавляя их в начало и конец ленты. При переходе на клон мгновенно (без анимации) переключайтесь на оригинал.