Cómo usar: Glide.js Slider Generator
- Pick options for your Glide.js slider and the slide content: demo panels, your own image URLs or cards.
- Set slides per view for desktop, tablet and mobile, the gap, effect, loop, autoplay, arrows and pagination.
- Check the live preview at desktop, tablet and mobile widths.
- Copy the HTML, CSS and JavaScript (CDN or npm), or download a complete HTML page.
About Glide.js
Glide.js is a tiny (about 7 KB min + gzip), dependency-free ES6 slider built on CSS transforms. It focuses on the essentials — perView, gaps, breakpoints, autoplay, swipe and keyboard — and keeps markup and styling up to you. It is ideal when page weight matters more than effects.
Glide terminology
| Option | Meaning |
|---|---|
type: 'carousel' | Infinite loop (clones slides) |
type: 'slider' | Stops at the first and last slide |
perView, gap | Visible slides and the gap in px |
focusAt: 'center' | Centers the active slide |
breakpoints | Max-width based: 767: { perView: 1 } |
data-glide-el="controls" | Markup hooks for arrows (data-glide-dir="<") and bullets (controls[nav]) |
What Glide does not do
There are no fade, vertical or 3D effects, and accessibility features are basic — add aria-labels to controls (the generated markup includes them). If you need those features, switch the generator to Swiper or Splide; your settings carry over.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Size (min + gzip, JS) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependencies | None | None | None | jQuery |
| Effects | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| Vertical | Yes | Yes | No | Yes |
| Accessibility | Good (a11y module) | Excellent (ARIA by default) | Basic | Basic |
| Maintained | Yes | Yes | Slowly | No (last release 2017) |
| License | MIT for all four | |||
También se busca como: glide js, glidejs carousel, glide slider, lightweight carousel, glide js example, glide breakpoints.
Herramientas que combinan con: Glide.js Slider Generator
- Slider & Carousel Generator — Configure a carousel with clicks instead of reading docs: choose a library, set breakpoints, effects and controls, watch the live preview and copy production-ready HTML, CSS and JavaScript.
- Swiper Slider Generator — Configure Swiper 11 with a visual editor — responsive breakpoints, effects, autoplay, pagination types and more — and copy ready-to-use HTML, CSS and JavaScript.
- Splide Slider Generator — Build an accessible, lightweight Splide carousel without reading the docs — set the options, check the preview at three screen sizes and copy the code.
- JavaScript Minifier — Paste JavaScript and get production-ready minified code from Terser — the same engine used by Vite, webpack and Rollup — with real before/after and gzipped sizes.
Preguntas frecuentes
Does Glide.js support fade or vertical sliders?
No. Glide only slides horizontally. Use Swiper or Splide for fade, vertical or 3D effects.
Why do my Glide bullets not work?
The bullets container needs
data-glide-el="controls[nav]" and one button per slide with data-glide-dir="=index" — the generated HTML includes both.Is Glide.js maintained?
It is stable and still widely used, though releases are infrequent. It has no dependencies, so it keeps working.
¿Puedo instalar Glide.js Slider Generator como aplicación web y utilizarla sin conexión?
Sí. Glide.js Slider Generator 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.