Durante años, crear un slider significaba añadir jQuery al proyecto, ya fuera por Slick, Owl Carousel o cualquier otra librerÃa de la época. En 2026 eso ya no tiene sentido. Tienes opciones mejores, más ligeras y que no arrastran 30 KB extra de dependencia para algo que el navegador puede hacer solo.
En este artÃculo te presento las alternativas reales que uso: desde librerÃas JavaScript puras hasta carruseles completamente en CSS. Sin jQuery. Sin drama.
Por qué dejar de usar jQuery en sliders
El problema con jQuery no es que funcione mal. Es que ya no lo necesitas. Los navegadores modernos tienen las APIs nativas que jQuery suplÃa hace diez años. Y en el caso de los sliders, el coste real se ve rápido: Slick Carousel pesa más de 30 KB comprimido más jQuery (otros 30 KB). Owl Carousel lleva sin mantenimiento desde 2018.
El impacto en rendimiento es directo: más tiempo de carga, más trabajo en el hilo principal, peor puntuación en Core Web Vitals. Si tu web ya tiene jQuery por otras razones, es un argumento menos. Pero si estás empezando un proyecto, añadir jQuery solo para el slider es una deuda técnica que no vale la pena contraer.
Swiper.js — el más completo
Swiper es la opción más descargada del ecosistema: más de 2 millones de descargas semanales en npm. No requiere jQuery. Su arquitectura es modular, lo que significa que solo importas los módulos que usas. El bundle completo pesa alrededor de 47 KB comprimido, pero si solo necesitas el núcleo básico, puedes quedarte en mucho menos.
Tiene soporte oficial para React, Vue y Angular. Incluye efectos 3D (cubo, flip, coverflow), slides virtuales para listas largas, autoplay, lazy loading y control por teclado. Si vienes de Slick o Owl Carousel, Swiper es la migración natural: cubre todo lo que hacÃan, con mejor rendimiento y sin dependencias.
La versión actual es la 12.x, publicada hace pocos dÃas en el momento de escribir esto.
Mi situación de uso para Swiper: galerÃas de producto en e-commerce, sliders hero con efectos de transición elaborados, o cuando el proyecto usa React/Vue y quiero un paquete oficial bien mantenido.
Enlace: swiperjs.com · Licencia MIT · Gratis
Tip: Si usas Swiper en proyectos de cliente con Elementor o Divi, considera Envato Elements para conseguir plantillas con Swiper ya integrado y configurado.
Splide — ligero y accesible
Splide es mi favorito cuando la accesibilidad es un requisito real. Está escrito en TypeScript, pesa unos 27 KB comprimido y no tiene ninguna dependencia. Lo que lo diferencia del resto es que implementa el patrón ARIA para carruseles de la W3C desde el primer momento: roles correctos, aria-label, aria-live y navegación por teclado sin configuración adicional.
La API es limpia. Un ejemplo básico:
new Splide('#slider').mount();— eso es todo para un slider funcional con flechas y paginación.
Tiene extensiones oficiales para video, autodesplazamiento y navegación por URL. Si tu proyecto tiene que pasar auditorÃas de accesibilidad (WCAG 2.1, Section 508), Splide es la opción más segura del mercado ahora mismo.
Enlace: splidejs.com · Licencia MIT · Gratis
Embla Carousel — minimalista y sin ataduras
Embla Carousel pesa unos 7 KB comprimido. Es la opción que usa shadcn/ui como componente de carrusel base, lo que ha disparado su adopción en proyectos React modernos: ronda las 800.000 descargas semanales en npm.
La filosofÃa es distinta a Swiper o Splide: Embla no te da un slider con estilos. Te da la lógica de desplazamiento y tú construyes el resto. Eso lo hace perfecto para proyectos donde el diseño es 100% personalizado, pero exige más código inicial que las otras opciones.
Si usas Next.js con shadcn/ui, ya tienes Embla disponible sin instalar nada más. Para proyectos sin ese stack, la curva de entrada es algo mayor que con Swiper o Splide.
Enlace: embla-carousel.com · Licencia MIT · Gratis
CSS Scroll Snap — sin una lÃnea de JavaScript
Esta es la opción que más me sorprendió cuando la probé en producción. CSS Scroll Snap convierte cualquier contenedor con overflow horizontal en un carrusel con ajuste de desplazamiento. Sin JavaScript. Sin librerÃas. Sin dependencias.
El soporte en navegadores modernos está por encima del 92%. El código base es sencillo:
scroll-snap-type: x mandatoryen el contenedor +scroll-snap-align: centeren cada slide. Eso es todo para un carrusel funcional en móvil y escritorio.
En Chrome 135, además, llegó el pseudoelemento ::scroll-button(), que permite añadir botones de anterior/siguiente directamente desde CSS, con roles ARIA correctos gestionados por el navegador. Firefox todavÃa no lo soporta de forma completa a mediados de 2026, asà que si lo usas, añade un fallback.
¿Cuándo uso CSS Scroll Snap? Cuando el carrusel es sencillo: galerÃas de imágenes, listas horizontales de tarjetas, sliders de testimonios sin autoplay. Si necesitas efectos 3D, autoplay con control fino o sincronización de thumbnails, una librerÃa sigue siendo mejor opción.
Comparativa rápida
| Opción | Peso (gzip) | jQuery | Accesibilidad | Mejor para |
|---|---|---|---|---|
| Swiper.js | ~47 KB | No | Media | E-commerce, efectos 3D, React/Vue |
| Splide | ~27 KB | No | Alta (WCAG) | Proyectos con requisitos de accesibilidad |
| Embla | ~7 KB | No | Media-alta | Next.js, shadcn/ui, diseño 100% propio |
| CSS Scroll Snap | 0 KB | No | Nativa | Carruseles simples, sin autoplay |
| >60 KB | SÃ | Baja | Legacy, no recomendado en proyectos nuevos |
¿Cuál elegir según tu proyecto?
Si no sabes por dónde empezar, te doy tres escenarios concretos:
- Portfolio o landing sencilla: CSS Scroll Snap. Cero dependencias, carga instantánea, suficiente para el 80% de los casos.
- E-commerce o web con requisitos de producto: Swiper.js. Tiene todo lo que vas a necesitar, la documentación es excelente y la comunidad es enorme.
- Proyecto React/Next.js o con auditorÃa de accesibilidad: Embla si usas shadcn/ui, Splide si la accesibilidad es un requisito duro.
Lo que sà te digo con claridad: si ves que un tutorial de 2026 te pide instalar jQuery para el slider, cierra la pestaña.
Recursos premium: Si quieres plantillas de slider ya maquetadas con Swiper o Splide, Creative Market tiene packs de componentes web listos para personalizar.
Preguntas frecuentes
¿Puedo migrar de Slick a Swiper sin reescribir todo?
La migración no es automática porque los paradigmas son distintos, pero tampoco es compleja. Swiper cubre todas las funciones de Slick con una API más moderna. Espera reescribir la inicialización y el marcado HTML, pero la lógica de negocio no cambia. En proyectos medianos, una tarde de trabajo es suficiente.
¿CSS Scroll Snap funciona en móvil?
SÃ, y funciona especialmente bien en móvil porque usa el scroll nativo del dispositivo. El gesto de deslizar funciona sin ninguna configuración adicional. De hecho, es donde mejor resultado da: la experiencia táctil es completamente fluida porque no hay JavaScript intermedio gestionando el movimiento.
¿Swiper.js es realmente gratis para uso comercial?
SÃ. Swiper tiene licencia MIT, lo que significa que puedes usarlo en proyectos comerciales sin restricciones ni pago de royalties. La versión de npm es la misma que la de producción, sin funciones ocultas detrás de un tier de pago.
¿Qué pasa con Glide.js? ¿Merece la pena?
Glide.js es una opción válida si necesitas un slider de un solo elemento y el tamaño de bundle es una restricción extrema. Su arquitectura modular permite usarlo muy ligero. El inconveniente es que tiene menos funciones que Splide o Swiper, y la comunidad es bastante más pequeña, lo que se nota en la velocidad a la que se resuelven problemas y se actualiza el código.
¿Puedo usar autoplay con CSS Scroll Snap?
Técnicamente sÃ, usando animaciones con keyframes que mueven el transform del contenedor. Pero en cuanto añades autoplay, ya estás en un territorio donde una librerÃa JavaScript ligera como Splide te va a dar mejor control y accesibilidad. El autoplay puro en CSS no detecta si el usuario ha pausado, no respeta prefers-reduced-motion automáticamente, y es difÃcil de controlar. Úsalo solo para animaciones decorativas sin contenido crÃtico.
Más recursos relacionados
- Plugins de sliders en jQuery — el archivo histórico, por si mantienes proyectos legacy
- Desarrollo web — Recursos de desarrollo web
Si te ha resultado útil, compártelo con quien todavÃa esté cargando jQuery para el slider. Le ahorrarás tiempo.
