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

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

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

Многие новички сразу подключают Swiper или Slick, не понимая, как вообще работает переключение слайдов. Но на самом деле базовый слайдер на чистом JavaScript устроен довольно просто: есть массив или набор элементов, текущий индекс активного слайда и кнопки, которые меняют этот индекс. Именно эта логика лежит в основе большинства каруселей и галерей.

Понимание внутреннего устройства слайдера помогает значительно легче работать с анимациями, DOM, событиями и динамическими интерфейсами.

Как устроен простой JavaScript-слайдер

У любого слайдера есть несколько основных частей:

  • контейнер со слайдами;
  • кнопка «вперёд»;
  • кнопка «назад»;
  • текущий активный индекс;
  • логика переключения.

Чаще всего слайды располагаются горизонтально внутри контейнера, а JavaScript просто сдвигает их через transform: translateX().

Именно поэтому большинство слайдеров визуально выглядят сложнее, чем устроены внутри. На практике основная логика обычно занимает всего несколько строк кода.

Создание HTML-структуры

Начинается всё с обычной HTML-разметки.

<div class="slider">

    <button class="prev">
        Назад
    </button>

    <div class="slides">

        <div class="slide active">
            Слайд 1
        </div>

        <div class="slide">
            Слайд 2
        </div>

        <div class="slide">
            Слайд 3
        </div>

    </div>

    <button class="next">
        Вперёд
    </button>

</div>

Здесь:

  • .slider — основной контейнер;
  • .slides — обёртка для слайдов;
  • .slide — отдельный слайд;
  • .prev и .next — кнопки управления.

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

Базовые стили для слайдера

Теперь нужно скрыть лишние слайды и оформить контейнер.

.slider {
    width: 500px;
    margin: 40px auto;
    text-align: center;
}

.slides {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.slide {
    display: none;

    font-size: 40px;
    padding: 60px;

    background: #f2f2f2;
}

.slide.active {
    display: block;
}

Здесь используется самый простой подход — отображается только активный слайд.

Более сложные карусели обычно используют:

  • translateX;
  • flex;
  • position: absolute;
  • CSS-анимации;
  • transition.

Но для понимания логики достаточно даже такого варианта.

Как работает переключение слайдов

Теперь нужна JavaScript-логика.

Сначала получаем элементы:

const slides =
    document.querySelectorAll('.slide');

const nextBtn =
    document.querySelector('.next');

const prevBtn =
    document.querySelector('.prev');

После этого создаётся переменная для хранения текущего индекса.

let currentSlide = 0;

Именно индекс определяет, какой слайд сейчас отображается.

Как показывать активный слайд

Теперь нужна функция отображения.

function showSlide(index) {

    slides.forEach(slide => {
        slide.classList.remove('active');
    });

    slides[index]
        .classList.add('active');
}

Здесь происходит несколько вещей:

Что делает код Для чего нужно
forEach() Проходит по всем слайдам
remove(‘active’) Скрывает старый активный слайд
add(‘active’) Показывает новый слайд

Именно через добавление и удаление классов работает огромное количество UI-компонентов в JavaScript.

Как работает кнопка «вперёд»

Теперь добавим обработчик событий.

nextBtn.addEventListener(
    'click',
    () => {

        currentSlide++;

        if (
            currentSlide >= slides.length
        ) {
            currentSlide = 0;
        }

        showSlide(currentSlide);
    }
);

Здесь:

  • индекс увеличивается;
  • проверяется конец массива;
  • слайдер возвращается к началу.

Именно такая логика создаёт бесконечный цикл переключения.

Как работает кнопка «назад»

Теперь обратное переключение.

prevBtn.addEventListener(
    'click',
    () => {

        currentSlide--;

        if (currentSlide < 0) {
            currentSlide =
                slides.length - 1;
        }

        showSlide(currentSlide);
    }
);

Теперь слайды можно листать в обе стороны.

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

Почему currentSlide считается основой всей логики

Главная идея любого слайдера — текущий индекс.

Например:

let currentSlide = 1;

Это означает:

  • сейчас отображается второй слайд;
  • все остальные скрыты;
  • кнопки изменяют именно это значение.

Именно поэтому понимание индекса считается ключом к работе со слайдерами, табами, каруселями и галереями.

Как сделать плавную анимацию

Показ и скрытие через display: none подходит для обучения, но современные интерфейсы обычно используют плавные переходы.

Например:

.slide {
    opacity: 0;

    transition: 0.4s;
}

.slide.active {
    opacity: 1;
}

Теперь переключение станет более плавным.

Чаще всего используют:

  • opacity;
  • translateX;
  • scale;
  • transform;
  • CSS transitions.

Именно анимация делает слайдер визуально «живым».

Как работает translateX в слайдерах

Более профессиональные слайдеры обычно двигают контейнер со слайдами через translateX.

Например:

slidesContainer.style.transform =
    `translateX(-${currentSlide * 100}%)`;

Логика здесь простая:

  • каждый слайд занимает 100%;
  • индекс умножается на ширину;
  • контейнер сдвигается влево.

Именно такой подход используют большинство современных каруселей.

Как сделать автоматическое переключение

Автослайдер работает через setInterval().

setInterval(() => {

    currentSlide++;

    if (
        currentSlide >= slides.length
    ) {
        currentSlide = 0;
    }

    showSlide(currentSlide);

}, 3000);

Теперь слайды будут автоматически переключаться каждые 3 секунды.

Такой вариант особенно часто используется:

  • в hero-баннерах;
  • рекламных блоках;
  • галереях;
  • карточках товаров.

Какие ошибки чаще всего делают новички

Самая распространённая проблема — неправильная работа с индексом.

Например:

currentSlide++;

Без проверки массива слайдер быстро ломается.

Вторая ошибка — забывать удалять активный класс у предыдущего слайда.

Третья проблема — попытка сразу сделать слишком сложную карусель:

  • autoplay;
  • drag;
  • touch events;
  • infinite loop;
  • thumbnails;
  • lazy loading.

Сначала важно понять базовую механику переключения.

Именно понимание логики делает дальнейшую работу со Swiper, Slick или GSAP значительно проще.

Почему слайдеры полезны для изучения JavaScript

Слайдер считается одним из лучших учебных проектов для frontend-разработки.

Во время его создания изучаются:

  1. DOM-элементы.
  2. addEventListener().
  3. Классы и classList.
  4. Индексы и массивы.
  5. Условия.
  6. CSS-анимации.
  7. Работа с transform.

Фактически один простой слайдер помогает понять большую часть базовой frontend-логики.

Именно поэтому подобные проекты часто дают новичкам в качестве первых практических задач.

Когда лучше использовать библиотеку

Слайдер на чистом JavaScript отлично подходит для обучения и небольших проектов. Но если нужны:

  • touch-события;
  • drag;
  • адаптивность;
  • виртуализация;
  • сложные эффекты;
  • синхронизация;
  • lazy loading,

то чаще используют готовые решения вроде:

  • Swiper;
  • Splide;
  • Glide.js;
  • Keen Slider.

Однако понимание базовой логики всё равно остаётся важным. Без него даже работа с библиотеками превращается в копирование кода без понимания происходящего.