Код

#статьи

2 апр 2025
0

Как сделать простой слайдер на HTML, CSS и JavaScript

Показываем, как сделать собственную галерею на веб-странице.

Иллюстрация: Оля Ежак для Skillbox Media

Мария Толчёнова

Филолог и технарь, пишет об IT так, что поймут даже новички. Коммерческий редактор, автор технических статей для vc.ru и «Хабра».

Если изображения или баннеры не помещаются на экране, можно использовать слайдер: он группирует элементы и позволяет пользователю перелистывать их по горизонтали. В этой статье рассказываем, как создать собственный слайдер с помощью HTML, CSS и JavaScript и встроить его на сайт.

Содержание

Что такое слайдер
Разрабатываем собственный слайдер
Библиотеки для создания слайдеров

Что такое слайдер

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

Представьте, что вам надо разместить на одной странице сразу четыре изображения. Можно расположить картинки друг под другом, но в таком случае объекты будут занимать много места. Для экономии пространства на странице лучше использовать слайдер: он соберёт все элементы в галерею, чтобы страница выглядела аккуратней.

Слайдер состоит из изображений, кнопок управления и блока с подписью. В любой момент в слайдере видно только одну картинку, а для перехода к следующей надо нажать на кнопку. Если слайдер на сайте используют для показа рекламы, то разработчики добавляют автоматическое переключение слайдов.

Например, вот так выглядит слайдер на сайте Skillbox Media:

На главной странице Amazon слайдер используют для автоматического пролистывания рекламных баннеров:

Слайдер рекламных баннеров на главной странице Amazon
*Скриншот: Amazon / Skillbox Media*

Иногда веб-дизайнеры стилизуют слайдеры, добавляют к ним необычные эффекты и анимации. Например, на сайте композитора Алана Менкена, который пишет музыку для мультфильмов Disney, собраны все его работы. При этом их скомпоновали с помощью слайдера и добавили музыку и видео:

Каждый слайд оживает, когда пользователь выбирает его
*Скриншот: Alan Menken / Skillbox Media*

Разрабатываем собственный слайдер

Слайдер можно реализовать без помощи сторонних библиотек, а для самых простых вариантов не потребуется даже JavaScript. В этой статье мы разработаем слайдер на HTML и CSS, посмотрим, как он работает, и шаг за шагом будем его улучшать. Сперва добавим скрипт на JavaScript, а потом настроим автоматическую прокрутку и адаптируем проект под мобильные устройства.

Мы предполагаем, что вы уже умеете верстать веб-страницы и знаете, как HTML, CSS и JavaScript работают друг с другом. Если нет — рекомендуем начать с изучения руководства по вёрстке для начинающих.

Вёрстка и стили

Для начала нам нужна структура проекта, поэтому создадим папку в любом месте компьютера и разместим в ней файл index.html. Добавим в него базовую разметку веб-страниц:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Слайдер</title>
    <style>
        /* Стили слайдера */
    </style>
</head>
<body>
<!-- Основной контейнер слайдера -->
</body>
</html>

В больших проектах вёрстку, стили и скрипты разделяют на отдельные файлы, чтобы было удобно работать с тысячами строк кода. У нас проект компактный, поэтому мы можем позволить себе писать всё в одном HTML-файле. Разметку веб-страницы будем задавать внутри парного тега <body>, а CSS-стили — внутри <style>.

Структура проекта готова, теперь можно переходить к вёрстке. В блоке <body> пропишем основные элементы слайдера, включая радиокнопки type="radio", слайды и индикатор выбранного слайда <label>. Картинки, которые вы используете в проекте, должны находиться в той же папке, что и HTML-файл:

<body>
<!-- Основной контейнер слайдера -->
<div class="slider">
    <!-- Радиокнопки для переключения слайдов -->
    <input type="radio" name="slider" id="slide1" checked> <!-- Выбран по умолчанию -->
    <input type="radio" name="slider" id="slide2">
    <input type="radio" name="slider" id="slide3">

    <!-- Контейнер всех слайдов -->
    <div class="slides">
        <div class="slide"><img src="Slide1.webp" width="300"></div>
        <div class="slide"><img src="Slide2.webp" width="300"></div>
        <div class="slide"><img src="Slide3.webp" width="300"></div>
    </div>

    <!-- Индикаторы (точки) для переключения -->
    <div class="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
    </div>
</div>
</body>

Если запустить код в браузере, то на странице нас встретит конструкция, слабо похожая на слайдер: все картинки друг над другом, а радиокнопки ничего не переключают. Всё из-за того, что мы ещё не добавили CSS-стили.

Пока наш элемент не похож на слайдер, но всё ещё впереди
*Скриншот: Skillbox Media*

В блоке <style> пропишем стили: разместим изображения по горизонтали и создадим контейнер такого размера, чтобы было видно только одну картинку. Для плавной анимации применим функцию transform:

<style>
        /* Контейнер слайдера */
        .slider {
            width: 300px; /* Фиксированная ширина */
            overflow: hidden; /* Скрываем выходящие за границы изображения */
            position: relative;
        }

        /* Контейнер, в котором будут находиться все слайды */
        .slides {
            display: flex; /* Располагаем слайды в ряд */
            width: 300%; /* Делаем ширину в три раза больше (по количеству слайдов) */
            transition: transform 0.5s ease-in-out; /* Плавное переключение слайдов */
        }

        /* Каждый отдельный слайд */
        .slide {
            width: 100%; /* Каждый слайд занимает всю ширину контейнера */
            flex-shrink: 0; /* Запрещаем уменьшение элементов внутри flex-контейнера */
        }

        /* Убираем отображение радиокнопок, они нужны только для управления */
        input[type="radio"] {
            display: none;
        }

        /* Переключение слайдов при выборе радиокнопки */
        #slide1:checked ~ .slides { transform: translateX(0%); }   /* Первый слайд */
        #slide2:checked ~ .slides { transform: translateX(-100%); } /* Второй слайд */
        #slide3:checked ~ .slides { transform: translateX(-200%); } /* Третий слайд */

        /* Контейнер для точек управления (индикаторов) */
        .controls {
            text-align: center; /* Размещаем точки по центру */
            margin-top: 10px; /* Добавляем отступ сверху */
        }

        /* Стиль для точек переключения */
        .controls label {
            display: inline-block; /* Размещаем точки в строку */
            width: 15px; /* Размер точки */
            height: 15px;
            background: gray; /* Серый цвет точки */
            border-radius: 50%; /* Делаем точки круглыми */
            margin: 5px; /* Добавляем небольшой отступ между ними */
            cursor: pointer; /* Делаем курсор в виде руки при наведении */
        }

        /* Меняем цвет активной точки при выборе слайда */
        input:checked + label {
            background: black;
        }
    </style>

Если запустить код сейчас, то на странице уже появится слайдер с переключателями в виде точек. Если выбрать одну из точек, то код моментально выведет нужную картинку:

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

Код слайдера полностью ↓

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Слайдер</title>
    <style>
        /* Контейнер слайдера */
        .slider {
            width: 300px; /* Фиксированная ширина */
            overflow: hidden; /* Скрываем выходящие за границы изображения */
            position: relative;
        }

        /* Контейнер, в котором будут находиться все слайды */
        .slides {
            display: flex; /* Располагаем слайды в ряд */
            width: 300%; /* Делаем ширину в три раза больше (по количеству слайдов) */
            transition: transform 0.5s ease-in-out; /* Плавное переключение слайдов */
        }

        /* Каждый отдельный слайд */
        .slide {
            width: 100%; /* Каждый слайд занимает всю ширину контейнера */
            flex-shrink: 0; /* Запрещаем уменьшение элементов внутри flex-контейнера */
        }

        /* Убираем отображение радиокнопок, они нужны только для управления */
        input[type="radio"] {
            display: none;
        }

        /* Переключение слайдов при выборе радиокнопки */
        #slide1:checked ~ .slides { transform: translateX(0%); }   /* Первый слайд */
        #slide2:checked ~ .slides { transform: translateX(-100%); } /* Второй слайд */
        #slide3:checked ~ .slides { transform: translateX(-200%); } /* Третий слайд */

        /* Контейнер для точек управления (индикаторов) */
        .controls {
            text-align: center; /* Размещаем точки по центру */
            margin-top: 10px; /* Добавляем отступ сверху */
        }

        /* Стиль для точек переключения */
        .controls label {
            display: inline-block; /* Размещаем точки в строку */
            width: 15px; /* Размер точки */
            height: 15px;
            background: gray; /* Серый цвет точки */
            border-radius: 50%; /* Делаем точки круглыми */
            margin: 5px; /* Добавляем небольшой отступ между ними */
            cursor: pointer; /* Делаем курсор в виде руки при наведении */
        }

        /* Меняем цвет активной точки при выборе слайда */
        input:checked + label {
            background: black;
        }
    </style>
</head>
<body>

<!-- Основной контейнер слайдера -->
<div class="slider">
    <!-- Радиокнопки для переключения слайдов -->
    <input type="radio" name="slider" id="slide1" checked> <!-- Выбран по умолчанию -->
    <input type="radio" name="slider" id="slide2">
    <input type="radio" name="slider" id="slide3">

    <!-- Контейнер всех слайдов -->
    <div class="slides">
        <div class="slide"><img src="Slide1.webp" width="300"></div>
        <div class="slide"><img src="Slide2.webp" width="300"></div>
        <div class="slide"><img src="Slide3.webp" width="300"></div>
    </div>

    <!-- Индикаторы (точки) для переключения -->
    <div class="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
    </div>
</div>

</body>
</html>

Добавляем JavaScript

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

Также, если внимательно посмотреть на код нашего слайдера, можно заметить в нём некоторые проблемы. Например, количество радиокнопок жёстко привязано к количеству слайдов. Если добавить ещё одно изображение в слайдер, то придётся переписать практически весь проект. Эту проблему тоже решим с помощью JavaScript и сделаем так, чтобы можно было добавлять в слайдер сколько угодно картинок.

Перепишем код нашего слайдера. В HTML-разметке заменим радиокнопки на обычные. Сами слайды оставим:

<body>
    <div class="slider">
        <!-- Контейнер, который содержит все слайды -->
        <div class="slides">
            <div class="slide"><img src="Slide1.webp"></div>
            <div class="slide"><img src="Slide2.webp"></div>
            <div class="slide"><img src="Slide3.webp"></div>
        </div>
    
        <!-- Кнопки управления слайдером -->
        <button class="prev">&#10094;</button> <!-- Кнопка «Назад» -->
        <button class="next">&#10095;</button> <!-- Кнопка «Вперёд» -->
    </div>
</body>

В CSS-стилях зададим оформление кнопок и уберём часть кода, которая отвечает за переключение слайдов — эту задачу доверим JavaScript:

<style>
        /* Основной контейнер слайдера */
        /* Основной контейнер слайдера */
        .slider {
            width: 300px; /* Фиксированная ширина слайдера */
            overflow: hidden; /* Обрезаем всё, что выходит за границы контейнера */
            position: relative; /* Необходимо для правильного позиционирования кнопок */
        }

        /* Контейнер всех слайдов */
        .slides {
            display: flex; /* Размещаем слайды в одну линию */
            transition: transform 0.5s ease-in-out; /* Анимация плавного смещения */
        }

        /* Каждый отдельный слайд */
        .slide {
            width: 100%; /* Занимает всю ширину контейнера */
            flex-shrink: 0; /* Запрещаем уменьшение размера слайдов */
        }

        /* Стили для изображений */
        .slide img {
            width: 100%; /* Картинки растягиваются на весь слайд */
            display: block; /* Убираем пробелы вокруг изображений */
        }

        /* Кнопки «Назад» и «Вперёд» */
        .prev, .next {
            position: absolute; /* Позволяет располагать кнопки поверх слайдов */
            top: 50%; /* Размещаем по вертикали по центру */
            transform: translateY(-50%); /* Сдвигаем кнопки вверх на половину их высоты */
            background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон кнопок */
            color: white; /* Белый цвет текста */
            border: none; /* Убираем границы */
            padding: 10px; /* Отступы внутри кнопки */
            cursor: pointer; /* Изменяем курсор на указатель */
            font-size: 18px; /* Размер шрифта */
            font-weight: bold; /* Делаем текст жирным */
            z-index: 2; /* Размещаем кнопки выше всех элементов */
        }

        /* Позиционируем кнопку «Назад» слева */
        .prev {
            left: 10px;
        }

        /* Позиционируем кнопку «Вперёд» справа */
        .next {
            right: 10px;
        }
    </style>

Оживим код с помощью JavaScript. Добавим функцию goToSlide для смены слайдов и обработчики addEventListener для кнопок переключения:

<script>
    // Находим контейнер со слайдами
    const slides = document.querySelector('.slides');

    // Определяем количество слайдов
    const slideCount = document.querySelectorAll('.slide').length;

    // Находим кнопки «Назад» и «Вперёд»
    const prevButton = document.querySelector('.prev');
    const nextButton = document.querySelector('.next');

    let currentIndex = 0; // Переменная для хранения текущего слайда

    // Функция смены слайдов
    function goToSlide(index) {
        if (index < 0) {
            index = slideCount - 1; // Если нажали «Назад» на первом слайде, переходим на последний
        } else if (index >= slideCount) {
            index = 0; // Если нажали «Вперёд» на последнем слайде, переходим на первый
        }

        currentIndex = index; // Запоминаем текущий слайд
        slides.style.transform = `translateX(${-index * 100}%)`; // Сдвигаем контейнер со слайдами
    }

    // Добавляем обработчик клика для кнопки «Назад»
    prevButton.addEventListener('click', () => {
        goToSlide(currentIndex - 1);
    });

    // Добавляем обработчик клика для кнопки «Вперёд»
    nextButton.addEventListener('click', () => {
        goToSlide(currentIndex + 1);
    });

    // Устанавливаем первый активный слайд при загрузке страницы
    goToSlide(0);
</script>

Теперь переключать картинки можно с помощью обычных кнопок, а сам слайдер вмещает в себя сколько угодно картинок:

Слайдер с JavaScript доступен на CodePen.

Код слайдера полностью ↓

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Слайдер</title>
    <style>
        /* Основной контейнер слайдера */
        .slider {
            width: 300px; /* Фиксированная ширина слайдера */
            overflow: hidden; /* Обрезаем всё, что выходит за границы контейнера */
            position: relative; /* Необходимо для правильного позиционирования кнопок */
        }

        /* Контейнер всех слайдов */
        .slides {
            display: flex; /* Размещаем слайды в одну линию */
            transition: transform 0.5s ease-in-out; /* Анимация плавного смещения */
        }

        /* Каждый отдельный слайд */
        .slide {
            width: 100%; /* Занимает всю ширину контейнера */
            flex-shrink: 0; /* Запрещаем уменьшение размера слайдов */
        }

        /* Стили для изображений */
        .slide img {
            width: 100%; /* Картинки растягиваются на весь слайд */
            display: block; /* Убираем пробелы вокруг изображений */
        }

        /* Кнопки «Назад» и «Вперёд» */
        .prev, .next {
            position: absolute; /* Позволяет располагать кнопки поверх слайдов */
            top: 50%; /* Размещаем по вертикали по центру */
            transform: translateY(-50%); /* Сдвигаем кнопки вверх на половину их высоты */
            background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон кнопок */
            color: white; /* Белый цвет текста */
            border: none; /* Убираем границы */
            padding: 10px; /* Отступы внутри кнопки */
            cursor: pointer; /* Изменяем курсор на указатель */
            font-size: 18px; /* Размер шрифта */
            font-weight: bold; /* Делаем текст жирным */
            z-index: 2; /* Размещаем кнопки выше всех элементов */
        }

        /* Позиционируем кнопку «Назад» слева */
        .prev {
            left: 10px;
        }

        /* Позиционируем кнопку «Вперёд» справа */
        .next {
            right: 10px;
        }
    </style>
</head>
<body>

<!-- Основной контейнер слайдера -->
<div class="slider">
    <!-- Контейнер, который содержит все слайды -->
    <div class="slides">
        <div class="slide"><img src="Slide1.webp"></div>
        <div class="slide"><img src="Slide2.webp"></div>
        <div class="slide"><img src="Slide3.webp"></div>
    </div>

    <!-- Кнопки управления слайдером -->
    <button class="prev">&#10094;</button> <!-- Кнопка «Назад» -->
    <button class="next">&#10095;</button> <!-- Кнопка «Вперёд» -->
</div>

<script>
    // Находим контейнер со слайдами
    const slides = document.querySelector('.slides');

    // Определяем количество слайдов
    const slideCount = document.querySelectorAll('.slide').length;

    // Находим кнопки «Назад» и «Вперёд»
    const prevButton = document.querySelector('.prev');
    const nextButton = document.querySelector('.next');

    let currentIndex = 0; // Переменная для хранения текущего слайда

    // Функция смены слайдов
    function goToSlide(index) {
        if (index < 0) {
            index = slideCount - 1; // Если нажали «Назад» на первом слайде, переходим на последний
        } else if (index >= slideCount) {
            index = 0; // Если нажали Вперёд» на последнем слайде, переходим на первый
        }

        currentIndex = index; // Запоминаем текущий слайд
        slides.style.transform = `translateX(${-index * 100}%)`; // Сдвигаем контейнер со слайдами
    }

    // Добавляем обработчик клика для кнопки «Назад»
    prevButton.addEventListener('click', () => {
        goToSlide(currentIndex - 1);
    });

    // Добавляем обработчик клика для кнопки «Вперёд»
    nextButton.addEventListener('click', () => {
        goToSlide(currentIndex + 1);
    });

    // Устанавливаем первый активный слайд при загрузке страницы
    goToSlide(0);
</script>

</body>
</html>

Добавляем подписи и автопрокрутку

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

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

Сперва отредактируем HTML-файл, добавив описание к каждому слайду:

<body>

<!-- Основной контейнер слайдера -->
<div class="slider">
    <!-- Контейнер для всех слайдов -->
    <div class="slides">
        <div class="slide">
            <img src="Slide1.webp">
            <div class="caption">Описание слайда 1</div> <!-- Подпись для слайда -->
        </div>
        <div class="slide">
            <img src="Slide2.webp">
            <div class="caption">Описание слайда 2</div> <!-- Подпись для слайда -->
        </div>
        <div class="slide">
            <img src="Slide3.webp">
            <div class="caption">Описание слайда 3</div> <!-- Подпись для слайда -->
        </div>
    </div>

    <!-- Кнопки для управления слайдером -->
    <button class="prev">&#10094;</button> <!-- Кнопка «Назад» -->
    <button class="next">&#10095;</button> <!-- Кнопка «Вперёд» -->
</div>
</body>

Подписи добавили, значит, теперь их надо стилизовать. Для этого в блоке <style> пропишем все параметры текста и разместим его поверх изображений:

<style>
        /* Подпись к слайду */
        .caption {
            position: absolute; /* Размещаем поверх изображения */
            bottom: 10px; /* Отступ от нижнего края */
            left: 50%; /* Выравниваем по центру */
            transform: translateX(-50%); /* Центрируем по горизонтали */
            background: rgba(0, 0, 0, 0.6); /* Полупрозрачный тёмный фон для читаемости */
            color: white; /* Белый текст */
            padding: 5px 10px; /* Внутренние отступы */
            font-size: 14px; /* Размер шрифта */
            border-radius: 5px; /* Закругляем углы */
        }

        }
    </style>

Теперь перепишем код в блоке <script>: добавим функцию автоматической прокрутки, которая будет останавливаться при наведении курсора на слайдер.

<script>
    // Находим контейнер со слайдами
    const slides = document.querySelector('.slides');

    // Определяем количество слайдов
    const slideCount = document.querySelectorAll('.slide').length;

    // Находим кнопки «Назад» и «Вперёд»
    const prevButton = document.querySelector('.prev');
    const nextButton = document.querySelector('.next');

    // Находим сам слайдер (нужен для остановки автопрокрутки при наведении)
    const slider = document.querySelector('.slider');

    let currentIndex = 0; // Переменная для хранения текущего индекса слайда
    let autoPlayInterval; // Переменная для хранения интервала автопрокрутки

    /**
     * Функция для смены слайдов
     * @param {number} index — индекс слайда, на который нужно перейти
     */
    function goToSlide(index) {
        if (index < 0) {
            index = slideCount - 1; // Если текущий слайд первый, переходим на последний
        } else if (index >= slideCount) {
            index = 0; // Если текущий слайд последний, переходим на первый
        }

        currentIndex = index; // Запоминаем текущий индекс
        slides.style.transform = `translateX(${-index * 100}%)`; // Смещаем контейнер слайдов
    }

    // Добавляем обработчик клика для кнопки «Назад»
    prevButton.addEventListener('click', () => {
        goToSlide(currentIndex - 1);
    });

    // Добавляем обработчик клика для кнопки «Вперёд»
    nextButton.addEventListener('click', () => {
        goToSlide(currentIndex + 1);
    });

    /**
     * Функция запуска автоматического перелистывания слайдов
     * Устанавливает интервал на три секунды
     */
    function startAutoPlay() {
        autoPlayInterval = setInterval(() => {
            goToSlide(currentIndex + 1);
        }, 3000);
    }

    /**
     * Функция остановки автопрокрутки
     * Останавливает заданный ранее интервал
     */
    function stopAutoPlay() {
        clearInterval(autoPlayInterval);
    }

    // Запускаем автопрокрутку при загрузке страницы
    startAutoPlay();

    // Останавливаем автопрокрутку, если пользователь навёл курсор на слайдер
    slider.addEventListener('mouseenter', stopAutoPlay);

    // Возобновляем автопрокрутку, когда пользователь убирает курсор
    slider.addEventListener('mouseleave', startAutoPlay);
</script>

Слайдер с подписями и автоматической прокруткой доступен на CodePen.

Код слайдера полностью ↓

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Слайдер</title>
    <style>
        /* Основной контейнер слайдера */
        .slider {
            width: 300px; /* Фиксированная ширина слайдера */
            overflow: hidden; /* Обрезаем всё, что выходит за границы контейнера */
            position: relative; /* Позволяет корректно позиционировать кнопки */
            text-align: center; /* Центрируем текст внутри */
        }

        /* Контейнер всех слайдов */
        .slides {
            display: flex; /* Размещаем слайды в одну линию */
            transition: transform 0.5s ease-in-out; /* Плавная анимация при смене слайдов */
        }

        /* Каждый отдельный слайд */
        .slide {
            width: 100%; /* Слайды занимают всю ширину контейнера */
            flex-shrink: 0; /* Запрещаем уменьшение размера слайдов */
            position: relative; /* Позволяет позиционировать подписи внутри слайдов */
        }

        /* Стили для изображений */
        .slide img {
            width: 100%; /* Картинка растягивается на всю ширину слайда */
            display: block; /* Убираем возможные пробелы вокруг изображений */
        }

        /* Подпись к слайду */
        .caption {
            position: absolute; /* Размещаем поверх изображения */
            bottom: 10px; /* Отступ от нижнего края */
            left: 50%; /* Выравниваем по центру */
            transform: translateX(-50%); /* Центрируем по горизонтали */
            background: rgba(0, 0, 0, 0.6); /* Полупрозрачный тёмный фон для читаемости */
            color: white; /* Белый текст */
            padding: 5px 10px; /* Внутренние отступы */
            font-size: 14px; /* Размер шрифта */
            border-radius: 5px; /* Закругляем углы */
        }

        /* Кнопки «Назад» и «Вперёд» */
        .prev, .next {
            position: absolute; /* Позволяет разместить поверх слайдов */
            top: 50%; /* Размещаем по центру вертикали */
            transform: translateY(-50%); /* Смещаем вверх на 50% высоты кнопки */
            background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
            color: white; /* Белый текст */
            border: none; /* Убираем границы */
            padding: 10px; /* Внутренние отступы */
            cursor: pointer; /* Изменяем курсор на указатель */
            font-size: 18px; /* Размер шрифта */
            font-weight: bold; /* Делаем текст жирным */
            z-index: 2; /* Размещаем кнопки выше всех элементов */
        }

        /* Позиционируем кнопку «Назад» слева */
        .prev {
            left: 10px;
        }

        /* Позиционируем кнопку «Вперёд» справа */
        .next {
            right: 10px;
        }
    </style>
</head>
<body>

<!-- Основной контейнер слайдера -->
<div class="slider">
    <!-- Контейнер для всех слайдов -->
    <div class="slides">
        <div class="slide">
            <img src="Slide1.webp">
            <div class="caption">Описание слайда 1</div> <!-- Подпись для слайда -->
        </div>
        <div class="slide">
            <img src="Slide2.webp">
            <div class="caption">Описание слайда 2</div> <!-- Подпись для слайда -->
        </div>
        <div class="slide">
            <img src="Slide3.webp">
            <div class="caption">Описание слайда 3</div> <!-- Подпись для слайда -->
        </div>
    </div>

    <!-- Кнопки для управления слайдером -->
    <button class="prev">&#10094;</button> <!-- Кнопка «Назад» -->
    <button class="next">&#10095;</button> <!-- Кнопка «Вперёд» -->
</div>

<script>
    // Находим контейнер со слайдами
    const slides = document.querySelector('.slides');

    // Определяем количество слайдов
    const slideCount = document.querySelectorAll('.slide').length;

    // Находим кнопки «Назад» и «Вперёд»
    const prevButton = document.querySelector('.prev');
    const nextButton = document.querySelector('.next');

    // Находим сам слайдер (нужен для остановки автопрокрутки при наведении)
    const slider = document.querySelector('.slider');

    let currentIndex = 0; // Переменная для хранения текущего индекса слайда
    let autoPlayInterval; // Переменная для хранения интервала автопрокрутки

    /**
     * Функция для смены слайдов
     * @param {number} index — индекс слайда, на который нужно перейти
     */
    function goToSlide(index) {
        if (index < 0) {
            index = slideCount - 1; // Если текущий слайд первый, переходим на последний
        } else if (index >= slideCount) {
            index = 0; // Если текущий слайд последний, переходим на первый
        }

        currentIndex = index; // Запоминаем текущий индекс
        slides.style.transform = `translateX(${-index * 100}%)`; // Смещаем контейнер слайдов
    }

    // Добавляем обработчик клика для кнопки «Назад»
    prevButton.addEventListener('click', () => {
        goToSlide(currentIndex - 1);
    });

    // Добавляем обработчик клика для кнопки «Вперёд»
    nextButton.addEventListener('click', () => {
        goToSlide(currentIndex + 1);
    });

    /**
     * Функция запуска автоматического перелистывания слайдов.
     * Устанавливает интервал на три секунды.
     */
    function startAutoPlay() {
        autoPlayInterval = setInterval(() => {
            goToSlide(currentIndex + 1);
        }, 3000);
    }

    /**
     * Функция остановки автопрокрутки.
     * Останавливает заданный ранее интервал.
     */
    function stopAutoPlay() {
        clearInterval(autoPlayInterval);
    }

    // Запускаем автопрокрутку при загрузке страницы
    startAutoPlay();

    // Останавливаем автопрокрутку, если пользователь навёл курсор на слайдер
    slider.addEventListener('mouseenter', stopAutoPlay);

    // Возобновляем автопрокрутку, когда пользователь убирает курсор
    slider.addEventListener('mouseleave', startAutoPlay);
</script>

</body>
</html>

Адаптивный дизайн

В 2025 году больше половины сетевого трафика приходится на мобильные устройства. При разработке сайтов важно учитывать этот факт и адаптировать дизайн под экраны смартфонов. Добавим нашему слайдеру адаптивности — сделаем так, чтобы он автоматически подстраивался под разные размеры экранов.

Для этого нам надо будет внести изменения только в CSS-стили проекта. Добавим медиазапрос @media, который будет применять специальное оформление только в случаях, когда ширина экрана устройства меньше 480 пикселей:

@media (max-width: 480px) {
            .slider {
                max-width: 100%; /* Растягиваем слайдер на всю ширину экрана */
            }

            .prev, .next {
                padding: 5px; /* Уменьшаем размер кнопок */
                font-size: 14px; /* Делаем шрифт поменьше */
            }

            .caption {
                font-size: 12px; /* Уменьшаем текст подписи */
                padding: 3px 6px; /* Уменьшаем отступы */
            }
        }

Код адаптивного слайдера с автоматической прокруткой и подписями доступен на CodePen.

Библиотеки для создания слайдеров

Мы попробовали разработать собственный слайдер и потратили на это довольно много времени. Если со временем нам захочется изменить анимации или добавить поддержку новых элементов управления, то придётся переписывать код.

Хорошая новость в том, что есть готовые библиотеки, в которых разработчики уже реализовали всё, что может пригодиться. В них есть всевозможные анимации, элементы интерфейса и функции адаптивности. Ко всему этому можно получить доступ, просто подключив библиотеку к проекту.

Рассмотрим популярные библиотеки с реализациями веб-слайдеров.

Swiper

Swiper — одна из самых мощных и гибких библиотек для создания слайдеров. Она поддерживает мобильные жесты, адаптивность, множество вариантов дизайна и эффектов анимации. С помощью Swiper на веб-страницу можно добавить как простую карусель из картинок, так и сложную мультимедийную галерею. Библиотеку в своих проектах используют DJI, Xiaomi, Adobe, Toyota, Disney, Verizon и BMW.

Например, с помощью Swiper можно встроить на сайт слайдер банковских карт с плавными анимациями:

Вот как подключить Swiper и создать простой слайдер с её помощью:

<!-- Подключение стилей и скрипта библиотеки Swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> <!-- Подключение основного скрипта Swiper, который отвечает за функциональность слайдера -->

<!-- Контейнер для слайдера -->
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="Slide1.webp"></div>
    <div class="swiper-slide"><img src="Slide2.webp"></div>
    <div class="swiper-slide"><img src="Slide3.webp"></div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<script>
  new Swiper('.swiper', {
    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
    loop: true
  });
</script>

В примере кода:

В самом начале файла импортируем библиотеку, указывая ссылку на CDN. Надо обязательно указать две ссылки: на коллекцию стилей и скрипт.
С помощью класса swiper создаём контейнер для слайдера. В нём создаём классы для каждого изображения и кнопок.
Внутри тега <script> инициализируем слайдер Swiper с базовыми настройками.

Glide

Glide — легковесная библиотека слайдеров, в которой нет зависимостей от сторонних пакетов. Это полезно для проектов с высокими требованиями к безопасности. Glide поддерживает плавную прокрутку слайдов и адаптивный дизайн.

Для использования библиотеки в проекте надо также подключить стили, создать контейнер и инициализировать Glide:

<!-- Подключение стилей и скрипта Glide -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css">
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>

<!-- Контейнер слайдера -->
<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide"><img src="Slide1.webp"></li>
      <li class="glide__slide"><img src="Slide2.webp"></li>
      <li class="glide__slide"><img src="Slide3.webp"></li>
    </ul>
  </div>
</div>

<script>
  // Инициализация Glide
  new Glide('.glide').mount();
</script>

Splide

Splide — быстрая и лёгкая библиотека слайдеров с широкой поддержкой браузеров и возможностью рендеринга элементов на стороне сервера. Это делает её отличным выбором для тяжёлых проектов, когда важна быстрая загрузка. Она также позволяет создавать карусели, вертикальные слайдеры и комбинировать эффекты.

Библиотеку так же просто подключить, как предыдущие:

<!-- Подключение Splide -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/js/splide.min.js"></script>

<!-- Разметка слайдера -->
<div id="splide" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="Slide1.webp"></li>
      <li class="splide__slide"><img src="Slide2.webp"></li>
      <li class="splide__slide"><img src="Slide3.webp"></li>
    </ul>
  </div>
</div>

<script>
  // Инициализация Splide
  new Splide('#splide').mount();
</script>

ItcSlider

ItcSlider — простая библиотека слайдеров на чистом JavaScript. Она также не использует сторонние зависимости. Важно учитывать, что её нельзя подключить, указав ссылку на CDN проекта. Вместо этого надо скачать архив библиотек с GitHub и самостоятельно загрузить необходимые элементы на сервер, где хранится сайт.

Вот как использовать ItcSlider:

<!-- Подключение ItcSlider →
<link rel="stylesheet" href="/assets/css/itc-slider.css">
<script src="/assets/js/itc-slider.js" defer></script>

<!-- Контейнер слайдера -->
<div class="itc-slider" data-slider="itc-slider" data-loop="true" data-autoplay="true" data-interval="3000">
  <div class="itc-slider-wrapper">
    <div class="itc-slider-items">
      <div class="itc-slider-item"><img src="Slide1.webp"></div>
      <div class="itc-slider-item"><img src="Slide2.webp"></div>
      <div class="itc-slider-item"><img src="Slide3.webp"></div>
    </div>
  </div>
 </div>

Что запомнить

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

Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!

Читайте также: