Слайдеры — это блоки на веб-странице, которые показывают несколько кадров-слайдов по очереди в одной области экрана. Кадры переключают стрелками, точками, свайпом или прокруткой. Карусель — частный случай слайдера: кадры едут лентой по горизонтали, и обычно видно сразу несколько. Сделать такой блок можно тремя способами — на чистом CSS через scroll-snap, на CSS-псевдоэлементах карусели (Chrome 135+) и связкой HTML + CSS + JavaScript.

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

Слайдер, карусель, слайдшоу: что чем называют

Схема: слайдер, карусель и мультислайдер — чем отличаются на экране
Схема: слайдер, карусель и мультислайдер — чем отличаются на экране

Единого стандарта в терминах нет: в спецификациях W3C и в документации MDN слово «slider» вообще занято другим — так называют элемент управления <input type="range">. Поэтому в вёрстке термины сложились по традиции, а не по норме:

  • Слайдер (slideshow) — показывает один кадр за раз, следующий приходит на смену предыдущему. Так делают первый экран лендинга.
  • Карусель (carousel) — кадры лежат лентой, за раз видно 1, 2, 3 или больше, лента прокручивается вбок. Так показывают товары, отзывы, логотипы.
  • Слайдшоу с автопрокруткой — тот же слайдер, но кадры меняются по таймеру без действия человека.

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

Практический вывод: заказчик и подрядчик под словом «карусель» часто имеют в виду разное. Перед вёрсткой договоритесь о трёх вещах — сколько карточек видно одновременно, есть ли автопрокрутка и что происходит на последнем кадре (стоп или зацикливание). Дальше всё сводится к выбору способа реализации.

ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

Когда слайдер помогает, а когда крадёт клики

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

Здесь у большинства статей про слайдеры дыра: они не показывают ни одной цифры. Единственный публичный замер по кликам внутри карусели, на который до сих пор ссылаются, — данные Эрика Раньона по сайту Университета Нотр-Дам (nd.edu), период с середины октября 2012 года по 22 января 2013 года:

  • карусель на главной кликали примерно 1% посетителей;
  • из этих кликов 84% пришлось на первый слайд, остальные четыре собрали примерно по 4% каждый;
  • на трёх других сайтах, где карусель не крутилась сама, кликабельность была выше — 1,7–2,3%, а доля первого кадра падала до 48–62%;
  • на одном сайте с автопрокруткой в карусель кликнули 8,8% посетителей главной, при этом на первый кадр пришлось 40%, на второй 18%, на последний 11%.

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

  • главное сообщение и главную кнопку кладите на первый слайд, а не «где-нибудь в карусели»;
  • не прячьте в слайды то, что должно быть найдено поиском по странице или прочитано всеми;
  • 3–5 кадров — потолок; десять слайдов не увидит почти никто.

Карусель хороша там, где содержимое равнозначно и его много: галерея товара, отзывы, партнёрские логотипы, скриншоты. Она плоха там, где нужно донести одно сообщение — тогда статичный блок выигрывает.

для id="промпт" блок о бесплатном курсе не обнаружен

Способ 1. Слайдер на чистом CSS: scroll-snap

Схема выбора: от самого дешёвого способа к самому дорогому
Схема выбора: от самого дешёвого способа к самому дорогому

Самый дешёвый рабочий слайдер сегодня пишется без единой строки JavaScript. Модуль CSS Scroll Snap заставляет обычный прокручиваемый контейнер «прилипать» к границам карточек: пользователь свайпает, а браузер сам доводит кадр до места. Свайп, инерция, скроллбар и работа с клавиатуры достаются бесплатно — это нативная прокрутка.

Нужны ровно два свойства: scroll-snap-type на контейнере (ось x, y, block, inline или both плюс строгость mandatory либо proximity) и scroll-snap-align на дочерних элементах (start, end, center, none).

Разметка HTML

<div class="carousel"> <div class="slide"><img src="/img/1.jpg" alt="Кадр 1" width="800" height="450"></div> <div class="slide"><img src="/img/2.jpg" alt="Кадр 2" width="800" height="450"></div> <div class="slide"><img src="/img/3.jpg" alt="Кадр 3" width="800" height="450"></div> </div>

Стилизация с помощью CSS

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 16px; } .slide { flex: 0 0 100%; /* один кадр во всю ширину */ scroll-snap-align: start; } .slide img { width: 100%; height: auto; display: block; }

Чтобы в кадре стояло несколько карточек, доли flex-basis мало: gap добавляется между карточками и в проценты не входит. Три карточки по 33.333% при gap: 16px уже не помещаются — на сцене 600 px третья кончается на 631,95 px против видимых 600 px и обрезается ровно на два гэпа. Гэпы надо вычесть из ширины кадра: flex: 0 0 calc((100% - 32px) / 3), где 32 px — это два промежутка по 16 px (то же самое, что calc(33.333% - 10.67px)). По замеру карточка становится 189,33 px, отступы кадров — 0 / 205,33 / 410,66 px, третья кончается на 599,98 px и влезает целиком. Общая формула для N карточек: calc((100% - (N - 1) * gap) / N). Если сверху висит фиксированная шапка, добавьте контейнеру scroll-padding, а отдельным карточкам — scroll-margin: они задают отступ, на котором кадр останавливается.

Предупреждение из документации MDN: не ставьте mandatory, если содержимое карточки выше контейнера — пользователь не сможет доскроллить переполнение до конца, для таких случаев берут proximity.

Поддержка широкая и старая: scroll-snap-type работает в Chrome с версии 69, в Edge с 79, в Safari с 11, в Firefox с 99 (по данным таблиц совместимости MDN). Полировать такой слайдер до бесконечной ленты помогает разбор бесконечного CSS-слайдера в стиле Polaroid. Подробности синтаксиса — в документации MDN по CSS Scroll Snap.

Способ 2. Карусель без JavaScript: ::scroll-button и ::scroll-marker

У способа со scroll-snap раньше был один пробел: стрелки «вперёд-назад» и точки-индикаторы всё равно приходилось рисовать руками и оживлять скриптом. С Chrome 135 (спецификация CSS Overflow 5) их генерирует сам браузер — это те самые «карусели на чистом CSS», о которых почти не пишут в русскоязычных статьях.

Работают три сущности: псевдоэлемент ::scroll-button() — кнопка прокрутки в заданную сторону, ::scroll-marker — точка-индикатор у каждого кадра, ::scroll-marker-group — контейнер, который эти точки собирает (включается свойством scroll-marker-group: after). Активную точку ловит псевдокласс :target-current.

ul.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-marker-group: after; list-style: none; margin: 0; padding: 0; } ul.carousel li { flex: 0 0 100%; scroll-snap-align: center; } /* стрелки генерирует браузер */ ul.carousel::scroll-button(left) { content: "◄" / "Предыдущий"; } ul.carousel::scroll-button(right) { content: "►" / "Следующий"; } ul.carousel::scroll-button(*) { border: 0; background: none; cursor: pointer; font-size: 2rem; } ul.carousel::scroll-button(*):disabled { opacity: .2; cursor: unset; } /* точки-индикаторы */ ul.carousel::scroll-marker-group { display: flex; justify-content: center; gap: 20px; } ul.carousel li::scroll-marker { content: ""; width: 16px; height: 16px; border: 2px solid #333; border-radius: 50%; } ul.carousel li::scroll-marker:target-current { background: #333; }

Важная оговорка, без которой это ловушка: по данным таблиц совместимости MDN ::scroll-button() и ::scroll-marker поддерживает только Chrome начиная со 135-й версии, а Firefox и Safari на момент августа 2026 года — нет. Статус фичи там помечен как экспериментальный.

Поэтому её ставят слоем поверх рабочей базы: сначала верстаете слайдер из способа 1 (он работает везде), затем дописываете блок с ::scroll-button — в браузерах без поддержки правила просто игнорируются, и остаётся прокрутка свайпом. Это классическое прогрессивное улучшение: базовая функция не зависит от новой возможности браузера.

Способ 3. Своя карусель на HTML, CSS и JavaScript

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

Разметка HTML

<div class="carousel"> <div class="track"> <div class="slide">Первый слайд</div> <div class="slide">Второй слайд</div> <div class="slide">Третий слайд</div> </div> <button class="prev" type="button" aria-label="Предыдущий слайд">&#9664;</button> <button class="next" type="button" aria-label="Следующий слайд">&#9654;</button> </div>

Стилизация с помощью CSS

.carousel { position: relative; overflow: hidden; } .track { display: flex; transition: transform .3s ease-in-out; /* едет ЛЕНТА, а не кадры */ } .slide { flex: 0 0 100%; } @media (prefers-reduced-motion: reduce) { .track { transition: none; } }

Здесь чаще всего и ломается самописная карусель — на том, от чего считается процент в translateX. Процент берётся от собственной ширины того элемента, на котором висит трансформация. Пока кадр во всю ширину ленты (flex: 0 0 100%), ширина кадра и ширина .track совпадают, разницы не видно, и translateX(-100%) отрабатывает верно. Как только в кадре несколько карточек, тот же -100% на .track сдвигает ленту на её ширину, а не на ширину карточки. Замер на сцене 600 px при flex: 0 0 50% (карточка 300 px, лента 600 px): после первого клика активный кадр встаёт не в 0, а в −300 px, после второго — в −600 px, то есть лента проскакивает по две карточки за шаг. При flex: 0 0 33.333% промах ещё крупнее: −400,02 px и −800,03 px вместо нуля.

Поэтому в коде ниже шаг считается не в процентах, а в пикселях, по фактической ширине кадра. По замеру активная карточка тогда встаёт ровно в 0 при любом flex-basis: и на 100%, и на 50%, и на 33.333%.

Добавление интерактивности с помощью JavaScript

const carousel = document.querySelector('.carousel'); const track = carousel.querySelector('.track'); const slides = track.querySelectorAll('.slide'); let index = 0; function goToSlide(i) { index = (i + slides.length) % slides.length; // зацикливание const step = slides[0].getBoundingClientRect().width; // шаг = ширина КАДРА, не ленты track.style.transform = `translateX(${-index * step}px)`; } carousel.querySelector('.prev').addEventListener('click', () => goToSlide(index - 1)); carousel.querySelector('.next').addEventListener('click', () => goToSlide(index + 1)); // автопрокрутка let timer = null; const play = () => { timer ??= setInterval(() => goToSlide(index + 1), 5000); }; const pause = () => { clearInterval(timer); timer = null; }; play(); carousel.addEventListener('mouseenter', pause); carousel.addEventListener('mouseleave', play); // мышь ушла — вращение возобновляется carousel.addEventListener('focusin', pause); // фокус с клавиатуры — само не стартует

Остаток строк кода — это уже надстройки: свайп через события pointerdown и pointerup, точки-индикаторы, реакция на клавиши-стрелки. Каждая надстройка добавляет свои крайние случаи, поэтому дальше дешевле взять готовую библиотеку. Что можно выжать из связки CSS и JavaScript, видно на примере бесконечных 3D-слайдеров.

Использование библиотек: что живо в 2026 году

Готовые библиотеки закрывают свайп, зацикливание, адаптив и доступность. Проблема в другом: половина названий, которые кочуют по статьям про слайдеры, годами не обновлялась. Ниже — версии и даты последних релизов по реестру npm на 4 августа 2026 года.

Библиотека Версия в npm Дата релиза Зависимости
Swiper 14.0.7 28.07.2026 нет
Embla Carousel 8.6.0 04.04.2025 нет
Glide.js 3.7.1 22.11.2024 нет
keen-slider 6.8.6 05.07.2023 нет
Splide 4.1.4 09.11.2022 нет
Owl Carousel 2.3.4 20.04.2018 jQuery
Slick Carousel 1.8.1 03.10.2017 jQuery

Что из этого следует. Swiper — единственная из списка, которая обновлялась на этой неделе; лицензия MIT, зависимостей нет. Embla и Glide.js живы и легче. Splide работает, но последний релиз вышел в ноябре 2022 года — три с половиной года без правок. Slick и Owl Carousel тянут за собой jQuery и не выпускали версий с 2017–2018 годов: для нового проекта это лишние килобайты и незакрытые баги, хотя на старых сайтах они всё ещё встречаются — как разобрать такой код, показано в руководстве по слайдерам на Slick Carousel.

Подключение Swiper за пять строк

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.css"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Слайд 1</div> <div class="swiper-slide">Слайд 2</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script src="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.js"></script> <script> const swiper = new Swiper('.swiper', { loop: true, pagination: { el: '.swiper-pagination' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } }); </script>

Обязательны три класса-обёртки: swiper — контейнер, swiper-wrapper — лента, swiper-slide — кадр. Полный список параметров — в официальной документации Swiper.

Доступность: что требует W3C от карусели

Схема чек-листа приёмки карусели перед публикацией
Схема чек-листа приёмки карусели перед публикацией

Слайдер — один из самых недоступных паттернов интерфейса: содержимое меняется само, фокус теряется, скринридер не понимает, что произошло. Паттерн Carousel из руководства W3C ARIA Authoring Practices задаёт минимум, который стоит закладывать сразу.

  • Контейнеру — роль region или group, атрибут aria-roledescription="carousel" и подпись через aria-label либо aria-labelledby.
  • Каждому кадру — роль group, атрибут aria-roledescription="slide" и своя подпись.
  • Автопрокрутка обязана останавливаться, когда в карусель заходит фокус с клавиатуры, и после этого не запускаться сама — только по явному действию пользователя. Отдельным пунктом руководство требует останавливать вращение на всё время, пока над каруселью висит мышь.
  • Кнопка «стоп/пуск» вращения идёт первой в порядке обхода табом внутри карусели, её подпись меняется динамически.
  • Живая область: aria-live="off" при включённой автопрокрутке и aria-live="polite", когда её нет.
  • Стрелки и точки — настоящие <button>, а не <div> с обработчиком клика: иначе не будет ни фокуса, ни клавиатуры.

Отдельная строка — движение. Медиафича prefers-reduced-motion сообщает, что пользователь просил меньше анимации: по документации MDN она доступна во всех основных браузерах с января 2020 года. Значение reduce должно выключать и перелистывание, и автопрокрутку.

@media (prefers-reduced-motion: reduce) { .track { transition: none; } .carousel { scroll-behavior: auto; } }

Скорость: чтобы карусель не съела LCP

Карусель на первом экране почти всегда становится LCP-элементом — тем самым крупнейшим блоком, по которому измеряется скорость загрузки. Ориентир Google: LCP должен укладываться в 2,5 секунды или меньше как минимум на 75% визитов.

  • Картинку первого кадра не переводите в loading="lazy". Правило из руководства web.dev звучит прямо: LCP-изображение никогда не грузят лениво.
  • Остальным кадрам, наоборот, можно понизить приоритет — атрибут fetchpriority="low" для картинок, которых не видно при старте, в том же руководстве назван как способ не отбирать канал у важного.
  • Каждому <img> проставляйте width и height — без них лента прыгает и портит метрику сдвига макета.
  • Не грузите библиотеку ради трёх картинок: способ 1 из этой статьи весит ноль килобайт JavaScript, а сборка Swiper 14.0.7 в варианте swiper-bundle.min.js — около 148 КБ до сжатия (по размеру файла на CDN jsDelivr).

Восемь ошибок, на которых ломаются слайдеры

Почти все поломки в вёрстке каруселей повторяются от проекта к проекту. Список ниже собран по тем же источникам, что и разделы выше, — проверьте по нему свой блок до сдачи.

  • Считают шаг в процентах, а везут ленту. Процент в translateX берётся от ширины того элемента, на котором висит трансформация. Пока кадр во всю ширину, -100% на .track работает; на мультислайдере он сдвигает ленту на её ширину, а не на ширину карточки. Замер на сцене 600 px, flex: 0 0 50%: активный кадр встаёт в −300 и −600 px вместо нуля. Считайте шаг в пикселях по фактической ширине кадра.
  • Ставят mandatory на высокое содержимое. Документация MDN предупреждает прямо: если карточка выше контейнера, обязательная привязка не даст дочитать переполнение — берите proximity.
  • Рисуют стрелки дивами. <div class="next"> с обработчиком клика не получает фокус и не жмётся с клавиатуры. Нужен <button type="button"> с подписью.
  • Автопрокрутка не останавливается. Руководство W3C ARIA APG требует остановки вращения на всё время, пока над каруселью висит мышь, а при заходе фокуса с клавиатуры — остановки без автоматического возврата: вращение возобновляется только по явному действию пользователя.
  • Первую картинку грузят лениво. Кадр на первом экране чаще всего и есть LCP-элемент; правило web.dev на этот счёт однозначное — LCP-изображение никогда не переводят в loading="lazy".
  • Строят всю навигацию на ::scroll-button(). По данным MDN этот псевдоэлемент есть только в Chrome с версии 135; в Firefox и Safari на август 2026 года его нет, и пользователь останется без стрелок, если под ними нет рабочей базы.
  • Тянут jQuery ради трёх картинок. Slick 1.8.1 не обновлялся с октября 2017 года, Owl Carousel 2.3.4 — с апреля 2018-го, обе требуют jQuery. Для нового проекта это лишний вес и незакрытые баги.
  • Не задают размеры картинкам. Без width и height в теге <img> лента прыгает при загрузке и портит метрику сдвига макета.

Какой способ выбрать

  • Галерея, отзывы, логотипы, свайп на мобильном — способ 1, scroll-snap. Ноль JavaScript, поддержка от Safari 11 и Chrome 69.
  • То же плюс нативные стрелки и точки, а аудитория преимущественно на Chrome — способ 2, псевдоэлементы ::scroll-button() и ::scroll-marker поверх способа 1.
  • Автопрокрутка, зацикливание, связанные слайдеры, подгрузка кадров — способ 3 или библиотека.
  • Сроки горят, дизайн сложный, нужен готовый набор эффектов — Swiper 14.

Частые вопросы

Слайдеры это что такое простыми словами? Это блок на странице, который по очереди показывает несколько кадров в одной области экрана: картинки, карточки товаров, отзывы. Кадры переключают стрелками, точками, свайпом или прокруткой.

Чем карусель отличается от слайдера? Строгого стандарта нет. По сложившейся практике слайдер показывает один кадр за раз со сменой на месте, а карусель везёт кадры лентой вбок, и одновременно видно несколько карточек.

Можно ли сделать слайдер в HTML и CSS без JavaScript? Да. Достаточно двух свойств: scroll-snap-type: x mandatory на контейнере и scroll-snap-align: start на кадрах. Свайп, инерция и клавиатура работают нативно.

Сколько слайдов делать? От трёх до пяти. По замеру Эрика Раньона на сайте nd.edu 84% кликов в карусели пришлось на первый кадр, остальные четыре собрали примерно по 4% каждый.

Какую библиотеку слайдера выбрать в 2026 году? Swiper 14.0.7 — обновляется, без зависимостей, лицензия MIT. Slick 1.8.1 и Owl Carousel 2.3.4 требуют jQuery и не обновлялись с 2017–2018 годов.

Заключение

Карусели и слайдеры остаются рабочим инструментом вёрстки, но цена ошибки в них выше, чем кажется: невидимый хвост слайдов, потерянный фокус клавиатуры и просевший LCP. Начинайте с самого простого варианта — scroll-snap на десяти строках CSS, — и переходите к JavaScript или библиотеке только тогда, когда простого способа перестало хватать. Проверяйте результат тремя вопросами: виден ли главный смысл на первом кадре, работает ли карусель с клавиатуры, не грузится ли первая картинка лениво.

РОССИЙСКИЕ НЕЙРОСЕТИ ДЛЯ ЖИЗНИ И КАРЬЕРЫ В 2025
Присоединяйся к онлайн-вебинару.
В прямом эфире разберем и потестируем лучшие на сегодняшний день отечественные ИИ!
Вы узнаете о том:
  • Выполним базовые задачи на российских нейросетях и посмотрим на результаты!
  • Файл-инструкцию «Как сделать нейро-фотосессию из своего фото бесплатно, без иностранных карт и прочих сложностей»
  • Покажем 10+ способов улучшить свою жизнь с ИИ каждому — от ребенка и пенсионера до управленца и предпринимателя
Участвовать бесплатно
ОБЗОРНЫЙ ПРАКТИКУМ ПО НАШУМЕВШИМ НЕЙРОСЕТЯМ
Нейросети DEEPSEEK И QWEN
За 2 часа сделаем полный обзор новых мощных ИИ-моделей, которые бросают вызов нейросети ChatGPT
Вы узнаете:
  • Возможность получить Доступ в Нейроклуб на целый месяц
  • Как ИИ ускоряет работу и приносит деньги
  • За 2 часа вы получите четкий план, как начать работать с ИИ прямо сейчас!
Участвовать бесплатно
Большой практикум
ЗАМЕНИ ВСЕ НЕЙРОСЕТИ НА ОДНУ — PERPLEXITY
ПОКАЖЕМ НА КОНКРЕТНЫХ КЕЙСАХ
  • Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Расскажем, как получить подписку
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно