Como 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 | |||
Também pesquisado como: glide js, glidejs carousel, glide slider, lightweight carousel, glide js example, glide breakpoints.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o Glide.js Slider Generator como um aplicativo da web e usá-lo offline?
Sim. O Glide.js Slider Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.