Карусель или меню прокрутки? Честное сравнение

Сначала — настоящий вопрос

Карусель показывает слайды: одну вещь (или одну страницу вещей) за раз, со снапом, эффектами и ощущением «позиция 3 из 8». Меню показывает ряд, который пользователь просматривает и из которого выбирает: строку категорий, полосу вкладок, бар чипов. Каруселям нужна семантика слайдов; меню — нативная прокрутка — инерция, полоса прокрутки, колесо, касание и фокус клавиатуры, ведущие себя ровно как на остальной странице, — плюс то, чего браузер не даёт: знание, какие элементы на экране.

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

против Swiper

Swiper — самый полный существующий фреймворк слайдеров: эффекты (fade, cube, coverflow), виртуальные слайды, зум, параллакс, пагинация и зрелая экосистема. Его ≈40 КБ окупаются, когда вы используете то, что он поставляет. Он заново реализует прокрутку трансформациями, так что нативная полоса прокрутки, поведение колеса и доступность прокрутки — это эмуляции, которые вы настраиваете, а не дефолты, которые наследуете.

• Выбирайте Swiper для слайдеров, ориентированных на изображения, эффектов или всего, что должно ощущаться как слайды.
• Выбирайте эту библиотеку, когда «карусель» — это бар чипов в духе YouTube или строка категорий в духе Netflix: вы получаете нативную прокрутку на ≈34 КБ меньше, плюс useIsVisible по каждому элементу — чего Swiper не моделирует, потому что слайды не являются элементами.

против Embla

Embla — headless-движок карусели с красивой физикой и первоклассным React-адаптером — на нём shadcn/ui строит свою карусель, и это правильный дефолт, когда вам нужен полный визуальный контроль над настоящей каруселью. Headless для меню — палка о двух концах: скролл к элементу при выборе, видимость по элементам, отключение стрелок и управление фокусом — всё это вам придётся строить руками.

• Выбирайте Embla для кастомных каруселей и физики снапа при малом размере.
• Выбирайте эту библиотеку, когда именно эти ручные части и есть суть: scrollToItem, useIsVisible, состояние стрелок first/last и apiRef поставляются рабочими.

против keen-slider

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

против react-slick

react-slick переносит карусель slick эпохи jQuery на React. Он всё ещё работает, но тащит за собой отдельный CSS-файл, его архитектура старше хуков, а поддержка редка. Команды, уходящие с него, обычно делятся на два лагеря: настоящие карусели (к Embla или Swiper) — и навигационные ряды, которые вогнали в centerMode лишь потому, что slick уже был установлен. Второй лагерь — это в точности форма этой библиотеки: выбор по центру, шаг в один элемент и перетаскивание для прокрутки без движка слайдера.

Как выглядит сторона меню

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

• 5,7 КБ min+gzip, TypeScript-first, MIT, ≈347 тыс. загрузок в месяц, поддерживается с 2018 года с одним стабильным API от React 16.8 до 19.
• Дружелюбно к SSR: ряд прокручивается до того, как ваш JavaScript гидрируется — эта страница и каждая демонстрация на сайте это доказывают.