Alternativas a Swiper para React, según de qué estás escapando en realidad
Nadie deja Swiper porque sea malo: es el slider más completo que existe. La gente lo deja por el peso (≈40 kB antes de los módulos), por heredar su DOM y su CSS, o porque su "slider" nunca fueron realmente diapositivas. Cada queja tiene una mejor respuesta distinta.
| Swiper | Embla | keen-slider | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| Bundle (núcleo, min+gzip) | ≈40 kB | ≈8 kB | ≈7 kB | ≈5.7 kB |
| Modelo | Diapositivas, todo incluido | Diapositivas, headless | Diapositivas, motor mínimo | Elementos en una fila de scroll nativo |
| Efectos y módulos | Los más completos disponibles | Plugins / hazlo tú mismo | Algunos integrados | Ninguno: recetas en su lugar |
| Controla la capa de gestos | Sí (transforms) | Sí (transforms) | Sí (transforms) | No: se desplaza el navegador |
| Visibilidad por elemento | Eventos de índice de diapositiva | Eventos de índice de diapositiva | Eventos de índice de diapositiva | Integrada (useIsVisible) |
| Mejor cambio cuando | — | De todos modos le das estilo a todo | Slider mínimo, sin dependencia de React | Las "diapositivas" son elementos pulsables |
Los tamaños son núcleos aproximados: el de Swiper crece con los módulos importados, lo que también significa que un build de Swiper recortado es más pequeño que su reputación.
Escapar de los kilobytes: Embla o keen-slider
Si el producto es un carrusel de verdad —con encaje, una página de diapositivas a la vez— los motores ligeros son casi un reemplazo directo:
- Embla (≈8 kB): headless, física excelente, hook de primera clase para React, el motor detrás del carrusel de shadcn/ui. Tú aportas todo el markup y el CSS, que es justo el punto.
- keen-slider (≈7 kB): un motor mínimo agnóstico de framework, útil cuando el mismo slider debe llegar a superficies con y sin React.
Ambos mantienen el modelo de diapositivas basado en transforms, así que efectos como fade o coverflow siguen siendo cosa tuya: si dependes de ellos, honestamente un build de Swiper recortado es mejor respuesta que reimplementarlos.
Escapar del modelo de diapositivas: el caso con forma de menú
La otra salida es para proyectos donde la semántica de diapositivas de Swiper nunca fue estructural: filas de categorías, muros de logos, barras de pestañas, barras de chips, rieles de producto. Las señales son configuraciones como slidesPerView: 'auto' junto con freeMode: true: ese par es pedirle a Swiper que imite el scroll nativo.
react-horizontal-scrolling-menu (≈5.7 kB) es ese scroll nativo, más las partes que el navegador no incluye: visibilidad por elemento, scroll hasta un elemento, flechas conscientes de los bordes y arrastre que no rompe los clics. Sin efectos, sin encaje, sin emulación de gestos: consulta las páginas de fila estilo Netflix, pestañas y barra de chips, o la tabla completa.
Una advertencia justa en ambas direcciones
Migrar fuera de Swiper para ahorrar peso y luego construir a mano autoplay, paginación, anuncios de accesibilidad y efectos es cómo un problema de 40 kB se convierte en un problema de un mes-persona. Cambia a un motor más ligero cuando tu uso sea genuinamente un subconjunto, y a un menú de scroll solo cuando la semántica de diapositivas fuera falsa desde el principio. Si aprovechas la profundidad de Swiper, quédate con Swiper.