Альтернативы Swiper для React — в зависимости от того, от чего вы на самом деле уходите
От Swiper не уходят из-за того, что он плохой — это самый полнофункциональный слайдер из существующих. Уходят из-за веса (≈40 kB ещё без модулей), из-за необходимости наследовать его DOM и CSS, либо потому что их «слайдер» на самом деле никогда не был слайдами. У каждой жалобы — свой лучший ответ.
| Swiper | Embla | keen-slider | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| Размер (ядро, min+gzip) | ≈40 kB | ≈8 kB | ≈7 kB | ≈5.7 kB |
| Модель | Слайды, всё включено | Слайды, headless | Слайды, минимальный движок | Элементы в нативно прокручиваемом ряду |
| Эффекты и модули | Самый богатый набор | Плагины / вручную | Кое-что встроено | Нет — вместо этого рецепты |
| Владеет слоем жестов | Да (transforms) | Да (transforms) | Да (transforms) | Нет — прокручивает браузер |
| Видимость по элементам | События по индексу слайда | События по индексу слайда | События по индексу слайда | Встроено (useIsVisible) |
| Лучше всего заменять, когда | — | Вы и так стилизуете всё сами | Нужен минимальный слайдер без привязки к React | «Слайды» на самом деле кликабельные элементы |
Размеры приведены приблизительно для ядра — у Swiper размер растёт с импортируемыми модулями, а значит, урезанная сборка Swiper меньше, чем гласит его репутация.
Спасаясь от килобайтов: Embla или keen-slider
Если продукт — настоящая карусель с прилипанием, показывающая по одной странице слайдов за раз, — лёгкие движки подходят почти как готовая замена:
- Embla (≈8 kB): headless, превосходная физика, полноценный хук для React, движок под капотом карусели shadcn/ui. Всю разметку и CSS приносите вы сами — в этом и суть.
- keen-slider (≈7 kB): минимальный движок, не привязанный к фреймворку, хорош, когда один и тот же слайдер должен работать и в React, и вне его.
Оба сохраняют модель слайдов на основе transform, поэтому эффекты вроде fade или coverflow остаются на вашей совести — если они вам нужны, урезанная сборка Swiper честно окажется лучшим ответом, чем реализовывать их заново.
Уход от модели слайдов: случай в форме меню
Другой выход — для случаев, где семантика слайдов Swiper никогда не была несущей: ряды категорий, стены логотипов, панели вкладок, панели чипов, товарные рейлы. Выдаёт это конфигурация вроде slidesPerView: 'auto' вместе с freeMode: true — эта пара означает, что Swiper просят изображать нативную прокрутку.
react-horizontal-scrolling-menu (≈5.7 kB) и есть эта нативная прокрутка плюс то, чего браузер не поставляет: видимость по элементам, scroll-to-item, стрелки, учитывающие края, и перетаскивание, не ломающее клики. Никаких эффектов, никакого прилипания, никакой эмуляции жестов — см. страницы ряд в стиле Netflix, вкладки и панель чипов, либо полную таблицу.
Честное предупреждение в обе стороны
Уйти от Swiper ради экономии веса, а затем вручную строить автовоспроизведение, пагинацию, a11y-объявления и эффекты — вот как проблема на 40 kB превращается в проблему на человеко-месяц. Переходите на более лёгкий движок, когда ваше использование действительно является подмножеством, и на прокручиваемое меню — только когда семантика слайдов с самого начала была фиктивной. Если вы используете глубину Swiper, оставайтесь на Swiper.