Alternativas a react-slick: migra según lo que construiste con él
react-slick porta a React el carrusel slick de la era jQuery. Todavía funciona, pero su arquitectura es anterior a los hooks, las versiones son escasas y arrastra un archivo CSS aparte en cada build. El reemplazo correcto depende menos de las funciones que de en cuál de dos bandos cae tu uso.
| react-slick | Embla | Swiper | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| Qué es | Port a React de slick (jQuery) | Motor de carrusel headless | Framework completo de slider | Menú de scroll, desplazamiento nativo |
| Mantenimiento | Escaso | Activo | Activo | Activo desde 2018 |
| Bundle (min+gzip) | ≈15 kB + CSS de slick | ≈8 kB | ≈40 kB | ≈5.7 kB |
| Requiere archivo CSS extra | Sí (dos) | No | Sí (núcleo) | Uno, o Tailwind vía el elemento shadcn |
| Semántica de diapositivas (snap, puntos, fade) | Sí | Sí | Sí | No, deliberadamente |
| Filas de elementos pulsables | Forzado con centerMode | Construido a mano sobre el motor | Configurado a contrapelo | El caso de uso principal |
Los tamaños son núcleos aproximados. La última columna es la librería propia de este sitio: la tabla lo dice en lugar de fingir lo contrario.
Bando uno: era un carrusel de verdad
Sliders de héroe, galerías de imágenes, rotadores de testimonios: cualquier cosa donde los puntos, el fade y el autoplay de slick sostenían el diseño. Migra a un motor de carrusel de verdad:
- Embla si le das estilo a todo tú mismo y quieres un núcleo headless pequeño: lo más parecido en espíritu a "slick, modernizado".
- Swiper si usabas mucho la lista de funciones de slick; cada función de slick tiene un equivalente en Swiper, normalmente mejor.
Mapea slidesToShow/slidesToScroll a slidesInView/slidesToScroll de Embla o a slidesPerView/slidesPerGroup de Swiper, y cuenta con eliminar tus sobrescrituras de CSS para posicionar flechas: ambos sucesores te dejan renderizar tus propios botones.
Bando dos: era navegación disfrazada con centerMode
La otra instalación de slick es la silenciosa: una fila de categorías, logos, fechas o filtros, forzada a ser un carrusel con centerMode, focusOnSelect y variableWidth porque slick ya estaba en el bundle. La pista es contra qué peleabas: clics que se disparaban después de un arrastre, flechas en los momentos equivocados, elementos que no podías medir, un encaje que no querías.
Esa fila era un menú. react-horizontal-scrolling-menu hace las tres cosas que centerMode fingía hacer —centrar el elemento pulsado, desplazarse de forma nativa con soporte de arrastre e informar de qué elementos son visibles— en ≈5.7 kB sin motor de slider. Consulta las páginas de pestañas desplazables y riel de categorías para las dos formas más comunes.
Sea cual sea el bando: la migración es más pequeña de lo que parece
La superficie de la API de slick es grande, pero al auditar configuraciones reales se reduce rápido: la mayoría de los proyectos usan un puñado de props. Enumera las que realmente usas, decide en qué bando cae cada uso y migra caso por caso: los dos bandos suelen convivir en un mismo código, y no hay ninguna regla que obligue a que ambos acaben en la misma librería.