So nutzt du: 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 | |||
Auch gesucht als: glide js, glidejs carousel, glide slider, lightweight carousel, glide js example, glide breakpoints.
Passende Tools zu: 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.
Häufige Fragen
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.
Kann ich Glide.js Slider Generator als Web-App installieren und offline nutzen?
Ja. Glide.js Slider Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.