Cómo usar: Generador de Glide.js
- Elige las opciones de tu slider de Glide.js y el contenido de las diapositivas: paneles de demostración, tus propias URLs de imágenes o tarjetas.
- Define las diapositivas visibles para escritorio, tableta y móvil, el espacio, el efecto, el bucle, el autoplay, las flechas y la paginación.
- Revisa la vista previa en vivo con anchos de escritorio, tableta y móvil.
- Copia el HTML, CSS y JavaScript (CDN o npm), o descarga una página HTML completa.
Acerca de Glide.js
Glide.js es un slider ES6 minúsculo (unos 7 KB min + gzip), sin dependencias, basado en transformaciones CSS. Se centra en lo esencial — perView, espacios, breakpoints, autoplay, deslizamiento y teclado — y deja el marcado y los estilos en tus manos. Es ideal cuando el peso de la página importa más que los efectos.
Terminología de Glide
| Opción | Significado |
|---|---|
type: 'carousel' | Bucle infinito (clona las diapositivas) |
type: 'slider' | Se detiene en la primera y la última diapositiva |
perView, gap | Diapositivas visibles y el espacio en px |
focusAt: 'center' | Centra la diapositiva activa |
breakpoints | Basado en max-width: 767: { perView: 1 } |
data-glide-el="controls" | Ganchos de marcado para flechas (data-glide-dir="<") y puntos (controls[nav]) |
Lo que Glide no hace
No hay efectos de fundido, vertical ni 3D, y las funciones de accesibilidad son básicas — añade aria-label a los controles (el marcado generado ya los incluye). Si necesitas esas funciones, cambia el generador a Swiper o Splide; tus ajustes se mantienen.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Tamaño (min + gzip, JS) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependencias | Ninguna | Ninguna | Ninguna | jQuery |
| Efectos | Deslizar, fundido, cubo, coverflow, giro, tarjetas, creativos | Deslizar, fundido | Deslizar | Deslizar, fundido |
| Vertical | Sí | Sí | No | Sí |
| Accesibilidad | Buena (módulo a11y) | Excelente (ARIA por defecto) | Básica | Básica |
| Mantenimiento | Sí | Sí | Lento | No (última versión en 2017) |
| Licencia | MIT para las cuatro | |||
También se busca como: glide js, carrusel glide js, glide slider, carrusel ligero, ejemplo glide js, glide js breakpoints, slider javascript sin dependencias.
Herramientas que combinan con: Generador de Glide.js
- Generador de Carruseles — Configura un carrusel con clics en lugar de leer la documentación: elige una librería, define breakpoints, efectos y controles, mira la vista previa en vivo y copia el HTML, CSS y JavaScript listos para producción.
- Generador de Swiper — Configura Swiper 11 con un editor visual (breakpoints responsivos, efectos, autoplay, tipos de paginación y más) y copia HTML, CSS y JavaScript listos para usar.
- Generador de Splide Slider — Crea un carrusel Splide accesible y ligero sin leer la documentación: define las opciones, revisa la vista previa en tres tamaños de pantalla y copia el código.
- Minificador de JavaScript — Pega tu JavaScript y obtén código minificado listo para producción con Terser, el mismo motor que usan Vite, webpack y Rollup, con el antes y después reales y los tamaños gzip.
Preguntas frecuentes
¿Glide.js admite sliders con fundido o verticales?
No. Glide solo desliza en horizontal. Usa Swiper o Splide para efectos de fundido, vertical o 3D.
¿Por qué no funcionan los puntos de Glide?
El contenedor de puntos necesita
data-glide-el="controls[nav]" y un botón por diapositiva con data-glide-dir="=index"; el HTML generado incluye ambos.¿Glide.js sigue manteniéndose?
Es estable y sigue muy usado, aunque las versiones son poco frecuentes. No tiene dependencias, así que seguirá funcionando.
¿Puedo instalar Generador de Glide.js como aplicación web y utilizarla sin conexión?
Sí. Generador de Glide.js es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.