Альтернативы react-slick: переносите в зависимости от того, что вы на нём построили
react-slick переносит карусель slick времён jQuery в React. Она всё ещё работает, но архитектура старше хуков, релизы редки, и в каждую сборку тянется отдельный CSS-файл. Правильная замена зависит не столько от возможностей, сколько от того, к какому из двух лагерей относится ваше использование.
| react-slick | Embla | Swiper | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| Что это такое | React-порт jQuery-версии slick | Headless-движок карусели | Полноценный фреймворк слайдера | Прокручиваемое меню, нативная прокрутка |
| Поддержка | Редкая | Активная | Активная | Активная с 2018 года |
| Размер (min+gzip) | ≈15 kB + CSS slick | ≈8 kB | ≈40 kB | ≈5.7 kB |
| Требуется отдельный CSS-файл | Да (два) | Нет | Да (ядро) | Один, либо Tailwind через элемент shadcn |
| Семантика слайдов (snap, точки, fade) | Да | Да | Да | Нет — намеренно |
| Ряды кликабельных элементов | Имитируется через centerMode | Собирается вручную поверх движка | Настраивается вопреки его логике | Основной сценарий использования |
Размеры приведены приблизительно для ядра. Последний столбец — собственная библиотека этого сайта: таблица честно об этом говорит, а не делает вид, что это не так.
Лагерь первый: это была настоящая карусель
Hero-слайдеры, галереи изображений, ротаторы отзывов — всё, где на дизайне держались точки, fade и автовоспроизведение slick. Переходите на настоящий карусельный движок:
- Embla, если вы стилизуете всё сами и хотите небольшое headless-ядро — ближе всего по духу к «модернизированному slick».
- Swiper, если вы активно использовали набор функций slick; у каждой функции slick есть эквивалент в Swiper, обычно даже лучше.
Сопоставьте slidesToShow/slidesToScroll с slidesInView/slidesToScroll из Embla или slidesPerView/slidesPerGroup из Swiper, и будьте готовы удалить свои CSS-переопределения позиционирования стрелок — оба преемника позволяют рендерить собственные кнопки.
Лагерь второй: это была навигация, переодетая в centerMode
Второй тип использования slick — тихий: ряд категорий, логотипов, дат или фильтров, вогнутый в карусель с помощью centerMode, focusOnSelect и variableWidth, потому что slick уже был в бандле. Выдаёт это то, с чем вы боролись: клики, срабатывающие после перетаскивания, стрелки не вовремя, элементы, которые нельзя было измерить, ненужное прилипание.
Этот ряд был меню. react-horizontal-scrolling-menu делает три вещи, которые centerMode лишь имитировал — центрирует нажатый элемент, прокручивает нативно с поддержкой перетаскивания и сообщает, какие элементы видны — уложившись в ≈5.7 kB без движка слайдера. Две самые распространённые формы см. на страницах прокручиваемых вкладок и рейла категорий.
В любом лагере: миграция меньше, чем кажется
Поверхность API slick большая, но при аудите реальных конфигураций она быстро сжимается: в большинстве проектов используется лишь горстка пропсов. Составьте список тех, что вы реально задаёте, определите, к какому лагерю относится каждое использование, и мигрируйте по одному экземпляру — оба лагеря часто сосуществуют в одной кодовой базе, и нет правила, что оба должны перейти на одну и ту же библиотеку.