Слайдер-гармошка: готовый компонент для сайта

Чем хорош именно этот компонент

Это не классическая карусель с перелистыванием «по одной картинке». Здесь на треке одновременно живут четыре слайда: активный раскрывается во всю ширину, соседние сжимаются в узкие полосы-корешки. Получается что-то среднее между слайдером и горизонтальным аккордеоном.

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

Резиновая геометрия без единого вычисления в JavaScript. Ширина слайдов задана долями flex-grow, а не пикселями. Компонент подстраивается под любую ширину контейнера сам, средствами браузера — нет обработчика resize, нет пересчётов, нет рывков при повороте телефона.

Никаких зависимостей. Чуть больше сотни строк чистого JavaScript, без jQuery, Swiper и прочих библиотек. Ничего не тянется из CDN, ничего не ломается при обновлении версии — компонент можно вставить в любой проект, от лендинга на голом HTML до страницы внутри CMS.

Состояние живёт в CSS-классах. JavaScript только переставляет три класса, всю анимацию ведёт CSS. Поэтому компонент не «залипает» при быстрых кликах и не расходится с тем, что видит пользователь.

Настройка в одном месте. Высота трека, пропорции широкого и узкого слайда, зазоры, скругления, цвета, размер кнопок — всё вынесено в CSS-переменные в начале файла стилей. Перекрасить под фирменный стиль и изменить пропорции можно, не заглядывая в логику.

Доступность заложена, а не приделана сбоку. Это то, что чаще всего отсутствует у слайдеров, скачанных с бесплатных сайтов:

1. Карусель объявлена как регион с описанием роли, каждый слайд — отдельная группа с номером «N из 7».
2. Слайды вне видимого окна убираются из дерева доступности, чтобы скринридер не зачитывал всю ленту подряд.
3. У кнопок навигации есть текстовые названия, хотя визуально это просто иконки.
4. На краю ленты кнопка помечается как неактивная через aria-disabled, а не отключается физически — клавиатурный фокус при этом не теряется и не отбрасывается в начало страницы.
5. Смена слайда озвучивается в живой области: «Слайд 5 из 7: Чистый лист».
6. У всех изображений есть осмысленные описания.
7. При системной настройке «уменьшить движение» анимация перестроения гасится, остаётся только плавность прозрачности.

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

Нужен вариант мощнее — соберу под вашу задачу

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

1. адаптивность по брейкпоинтам — четыре слайда на десктопе, два на планшете, один на телефоне;
2. свайпы — перелистывание пальцем на сенсорных экранах и перетаскиванием мышью;
3. клик по слайду — раскрытие любого кадра сразу, без пошаговой навигации;
4. клавиатурные стрелки и переход к первому/последнему слайду;
5. автопрокрутка с паузой при наведении и фокусе, с кнопкой остановки;
6. бесконечная лента — переход с последнего слайда на первый;
7. индикаторы-точки и счётчик позиции;
8. ленивая загрузка изображений и предзагрузка соседних — критично, когда слайдов десятки;
9. подключение к данным — слайды формируются из JSON, каталога или CMS, а не прописаны в разметке руками;
10. другая механика раскрытия — вертикальная гармошка, сетка с увеличением активной ячейки, фон-параллакс.

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

Нужны другие компоненты

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

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

Опишите задачу — и я предложу решение и сроки.