--- title: "react-horizontal-scrolling-menu против Swiper, Embla, react-slick" description: "Честное сравнение: когда горизонтальное меню прокрутки лучше карусельной библиотеки, а когда нет. Swiper, Embla, keen-slider и react-slick бок о бок." canonical: "https://react-horizontal-scrolling-menu.dev/ru/compare" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- # Карусель или меню прокрутки? Честное сравнение Swiper, Embla, keen-slider и react-slick — это движки каруселей: они заново реализуют прокрутку на JavaScript, чтобы получить семантику слайдов, физику снапа и эффекты. react-horizontal-scrolling-menu не из их числа — он едет на нативной прокрутке браузера и добавляет отслеживание видимости каждого элемента. Что вам нужно, зависит от того, что вы строите; и для заметной доли использования каруселей честный ответ таков: всё это время вы строили меню. | | эта библиотека | Swiper | Embla | keen-slider | react-slick | | --- | --- | --- | --- | --- | --- | | Что это | Меню прокрутки с отслеживанием видимости | Полноценный фреймворк слайдера/карусели | Headless-движок карусели | Не зависящий от фреймворка движок слайдера | Порт jQuery-слайдера slick на React | | Движок прокрутки | Нативная прокрутка браузера | JS-трансформации + физика | JS-трансформации + физика | JS-трансформации + физика | JS-трансформации (CSS-переходы) | | Бандл (ядро, min+gzip) | ≈5,7 КБ | ≈40 КБ | ≈8 КБ | ≈7 КБ | ≈15 КБ + slick CSS | | Какие элементы на экране | Встроено — useIsVisible по элементам | На основе индекса слайда | События индекса слайда | События индекса слайда | На основе индекса слайда | | Снап, эффекты, физика | Нет — намеренно | Богато (fade, cube, coverflow…) | На основе плагинов, с твином | Есть, включая свободный режим | Fade, режим по центру | | Цикл / автовоспроизведение | Рецепты на публичном API | Встроенные пропы | Плагины | Встроенные опции | Встроенные пропы | | Полоса прокрутки, колесо, фокус клавиатуры | Нативно — бесплатно из браузера | Эмуляция / модули по подписке | Своими руками (headless) | Своими руками | Ограниченно | | Лучше всего для | Строк категорий, вкладок, чип-фильтров | Полноэкранных слайдеров, галерей | Кастомных каруселей (дефолт shadcn) | Минималистичных кастомных слайдеров | Миграции с устаревшего slick | Размеры бандлов — приблизительные ядра; прежде чем решать по одному размеру, сверьтесь с bundlephobia. ## Сначала — настоящий вопрос **Карусель** показывает слайды: одну вещь (или одну страницу вещей) за раз, со снапом, эффектами и ощущением «позиция 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 уже был установлен. Второй лагерь — это в точности форма этой библиотеки: [выбор по центру](https://react-horizontal-scrolling-menu.dev/ru/examples/center-on-click.md), [шаг в один элемент](https://react-horizontal-scrolling-menu.dev/ru/examples/one-item-scroll.md) и [перетаскивание для прокрутки](https://react-horizontal-scrolling-menu.dev/ru/examples/mouse-drag.md) без движка слайдера. ## Как выглядит сторона меню Каждый паттерн на этом сайте — живой и отрендеренный на сервере, каждый с полным исходником: [прокручиваемые вкладки](https://react-horizontal-scrolling-menu.dev/ru/examples/center-on-click.md), [чипы-фильтры](https://react-horizontal-scrolling-menu.dev/ru/examples/add-item-and-scroll-to-it.md), [ряды с подгрузкой](https://react-horizontal-scrolling-menu.dev/ru/examples/add-items.md) и — две функции, которые, как считается, требуют движка карусели, — [бесконечный цикл](https://react-horizontal-scrolling-menu.dev/ru/examples/infinite-loop.md) и [автовоспроизведение](https://react-horizontal-scrolling-menu.dev/ru/examples/autoplay.md), каждая примерно по шестьдесят строк на публичном API. - 5,7 КБ min+gzip, TypeScript-first, MIT, ≈347 тыс. загрузок в месяц, поддерживается с 2018 года с одним стабильным API от React 16.8 до 19. - Дружелюбно к SSR: ряд прокручивается до того, как ваш JavaScript гидрируется — эта страница и каждая демонстрация на сайте это доказывают. [Посмотреть все примеры](https://react-horizontal-scrolling-menu.dev/ru/examples.md) · [Попробовать в Storybook](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-simple--simple) [GitHub](https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu) --- More examples: Library summary for LLMs: