react-slick alternatives: migrate by what you built with it
react-slick ports the jQuery-era slick carousel to React. It still works, but the architecture predates hooks, releases are sparse, and it drags a separate CSS file into every build. The right replacement depends less on features than on which of two camps your usage falls into.
| react-slick | Embla | Swiper | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| What it is | React port of jQuery slick | Headless carousel engine | Full slider framework | Scrolling menu, native scroll |
| Maintenance | Sparse | Active | Active | Active since 2018 |
| Bundle (min+gzip) | ≈15 kB + slick CSS | ≈8 kB | ≈40 kB | ≈5.7 kB |
| Extra CSS file required | Yes (two) | No | Yes (core) | One, or Tailwind via shadcn item |
| Slide semantics (snap, dots, fade) | Yes | Yes | Yes | No — deliberately |
| Rows of clickable items | Bent via centerMode | Hand-built on the engine | Configured against the grain | The core use case |
Sizes are approximate cores. The last column is this site’s own library — the table says so rather than pretending otherwise.
Camp one: it was a real carousel
Hero sliders, image galleries, testimonial rotators — anything where slick's dots, fade and autoplay carried the design. Migrate to a real carousel engine:
- Embla if you style everything yourself and want a small headless core — the closest to "slick, modernized" in spirit.
- Swiper if you used slick's feature list heavily; every slick feature has a Swiper equivalent, usually better.
Map slidesToShow/slidesToScroll to Embla's slidesInView/slidesToScroll or Swiper's slidesPerView/slidesPerGroup, and expect to delete your arrow-positioning CSS overrides — both successors let you render your own buttons.
Camp two: it was navigation wearing centerMode
The other slick install is the quiet one: a row of categories, logos, dates or filters, bent into a carousel with centerMode, focusOnSelect and variableWidth because slick was already in the bundle. The tell is what you fought: clicks firing after drags, arrows at the wrong times, items you couldn't measure, snap you didn't want.
That row was a menu. react-horizontal-scrolling-menu does the three things centerMode was faking — center the clicked item, scroll natively with drag support, and report which items are visible — in ≈5.7 kB with no slider engine. See the scrollable tabs and category rail pages for the two most common shapes.
Whichever camp: the migration is smaller than it looks
slick’s API surface is large, but audits of real configs shrink fast: most projects use a handful of props. List the ones you actually set, decide which camp each usage is in, and migrate per-instance — the two camps often coexist in one codebase, and there is no rule both must land on the same library.