Слайдер — интерактивный элемент интерфейса, который позволяет листать контент влево или вправо с помощью кнопок или свайпов. Например, в интернет-магазине он может показывать карточки товаров с фотографиями и ценами, а на новостном портале — последние статьи с заголовками и превью. Это позволяет быстро просматривать сразу несколько элементов контента, не прокручивая всю страницу вниз.
Слайдер можно создать несколькими способами: написать с нуля на чистом JavaScript, использовать готовые библиотеки, применить фреймворк вроде React или Vue, а также скомбинировать разные подходы. Выбор зависит от задачи, вашего опыта и технологий проекта.
В большинстве проектов слайдер на чистом JavaScript не пишут, поскольку это сложно: разработчику нужно самостоятельно обрабатывать события свайпов, управлять анимациями, обеспечивать поддержку разных браузеров и устройств. Фреймворки используются в крупных приложениях, где слайдер — часть системы компонентов.
А вот библиотеки содержат всю нужную логику, протестированы в разных браузерах и легко интегрируются в любой проект. Мы поработаем с одной из таких библиотек и создадим современный слайдер, который сможет адаптироваться под разные размеры экрана.
Общие вводные и подготовка к работе
На практике фронтенд-разработчик или верстальщик не придумывает внешний вид слайдера с нуля. Этим занимается дизайнер — он создаёт готовый макет в Figma или другом графическом редакторе. В макете уже есть всё: изображения и размеры слайдов, отступы между ними, стили кнопок навигации, цвета индикаторов и другие компоненты.
Например, вот пример макета слайдера в Figma:
Для этой статьи отдельный макет нам никто не создавал, поэтому побудем сами себе дизайнерами. Для вдохновения откроем сайт книжного издательства «МИФ» и посмотрим на их типичный слайдер:
Недавно мы опубликовали статью «ТОП-20 книг по Python для новичков и опытных разработчиков». Возьмем из нее подборку книг и создадим похожий слайдер — как у издательства «МИФ», но с другими стилями.
В качестве дополнительного инструмента мы будем использовать Swiper — это бесплатная JavaScript-библиотека для создания слайдеров с поддержкой сенсорных жестов, адаптивной версткой и богатым функционалом. Если вы захотите использовать другую библиотеку, общий принцип работы будет таким же, как мы опишем далее в статье.
Для дальнейшей работы вам нужно скачать изображения книг для слайдера, установить VS Code или другой редактор кода на свое усмотрение. Все последующие шаги мы будем объяснять простым языком для новичков, но у вас должно быть хотя бы общее понимание, что такое верстка и чем разметка HTML отличается от CSS и JavaScript.
Шаг 1. Создаём структуру проекта и подключаем слайдер
Создайте папку и назовите ее, например, slider. Затем откройте эту папку в редакторе кода и создайте следующие файлы и подпапки:
- index.html — это наш главный файл проекта, в котором будет находиться разметка страницы и слайдера.
- Подпапка css => style.css — файл со стилями. В нем мы опишем внешний вид элементов: цвета, размеры, отступы и анимации.
- Подпапка js => main.js — файл с JavaScript-кодом. В нем мы инициализируем библиотеку Swiper и настроим слайдер.
- images — подпапка с изображениями для слайдера.
Когда структура готова, откройте файл index.html. В нем нам нужно создать базовую разметку и подключить Swiper к проекту. Это можно сделать несколькими способами, но проще всего использовать CDN — сеть серверов, которая доставляет файлы библиотеки прямо в браузер. Мы берем несколько ссылок из официальной документации — и готово:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Адаптивный слайдер на HTML, CSS и JavaScript с помощью Swiper</title>
<!-- Подключаем стили Swiper (через CDN) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Подключаем собственные стили -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Подключаем скрипт Swiper (через CDN) -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Подключаем собственный JavaScript -->
<script src="js/main.js" defer></script>
</body>
</html>
Шаг 2. Добавляем разметку слайдера
Вся разметка слайдера размещается внутри тега <body> в файле index.html. Библиотека Swiper требует строгую структуру HTML:
Основной контейнер с классом .swiper — это корневой элемент, который оборачивает весь слайдер и задает его границы на странице.
Обертка слайдов с классом .swiper-wrapper — контейнер, внутри которого размещаются все слайды. Этот элемент обеспечивает их правильное позиционирование и анимацию при прокрутке.
Слайды с классом .swiper-slide — каждый элемент карусели с текстом, изображениями или другими элементами интерфейса.
Также нам понадобятся стрелки навигации для переключения слайдов — .swiper-button-prev и .swiper-button-next. Еще добавим точки для отображения текущего слайда (пагинация) — .swiper-pagination. Эти и другие настройки описаны в документации Swiper.
Каждый слайд будет состоять из обложки книги, ее краткого описания и кнопки Подробнее, при клике на которую вы сможете перейти к соответствующему описанию книги в статье на сайте Skillfactory Media:
<!-- Слайд 1 --> <div class="swiper-slide"> <div class="book-card"> <div class="book-image"> <img src="images/1.jpg" alt="Python за 7 дней. Краткий курс для начинающих" loading="lazy"> <a class="book-button" href="#" target="_blank" rel="noopener">Подробнее</a> </div> </div> </div>
Полную версию разметки со всеми двадцатью слайдами вы можете скачать по этой ссылке, добавить в редактор и открыть в браузере:
Шаг 3. Настраиваем стили и адаптируем слайдер под разные экраны
В CSS мы сбрасываем стандартные отступы браузера и оформляем страницу: задаём тёмный фон, белый текст и шрифт без засечек. Контейнер слайдера центрируем с максимальной шириной 1300px и боковыми отступами, а заголовок с описанием выравниваем по центру.
Блоку .swiper добавляем внутренние отступы, чтобы карточки не прилипали к краям, и оставляем немного пространства снизу под точки пагинации. Также настраиваем элементы управления: стрелки и пагинацию. Стрелки оформляем в виде полупрозрачных круглых кнопок, которые подсвечиваются при наведении. А точки пагинации будут менять цвет и увеличиваться, когда показывают активный слайд.
Далее оформляем карточки книг. Каждая карточка — это отдельный блок с обложкой, кратким описанием и кнопкой Подробнее. Обложку помещаем в рамку и добавляем эффект увеличения при наведении. Описание ограничиваем двумя строками, чтобы карточки выглядели ровно. Кнопку выделяем ярким фирменным салатовым цветом Skillfactory, который при наведении плавно меняется на коралловый.
После основных стилей прописываем медиазапросы — правила CSS, которые применяют стили в зависимости от размера экрана устройства. Для адаптации мы постепенно уменьшаем шрифты, отступы и высоту изображений. А на экранах меньше 768 пикселей скрываем стрелки — так они не занимают место, а слайды можно переключать свайпами.
Чтобы увидеть результат, скачайте папку со стилями и добавьте ее в проект. Затем обновите страницу в браузере — должно получиться так:
Шаг 4. Включаем слайдер и проверяем его работу
Теперь добавим JavaScript, чтобы оживить слайдер. Создаем новый объект Swiper, передаем ему класс .swiper и настраиваем параметры:
- Сначала настраиваем количество отображаемых слайдов (slidesPerView: 1) и расстояние между ними (spaceBetween: 30).
- Делаем бесконечную прокрутку через опцию loop: true — после последнего слайда снова идёт первый. Затем включаем автопрокрутку через autoplay: слайды будут меняться каждые 3,5 секунды, останавливаться при наведении и продолжать после.
- Для ручного управления подключаем стрелки (.swiper-button-next и .swiper-button-prev), а также точки-индикаторы.
- Настраиваем адаптивность через блок breakpoints: на смартфонах будет один слайд, на планшетах — два, на компьютерах — три.
Если вы скачаете скрипт и подключите его в проект, слайдер преобразится, начнёт плавно листаться и реагировать на клики:
Дополнительно мы можем открыть в браузере инспектор элементов Chrome DevTools и посмотреть, как слайдер отображается на планшетах:
Ещё сильнее сузим экран и проверим адаптивность на смартфонах:
