So nutzt du: Glide.js Slider Generator
- Wähle die Optionen für deinen Glide.js-Slider und die Slide-Inhalte: Demo-Panels, eigene Bild-URLs oder Karten.
- Lege die Slides pro Ansicht für Desktop, Tablet und Mobil fest, dazu Abstand, Effekt, Endlosschleife, Autoplay, Pfeile und Seitennavigation.
- Prüfe die Live-Vorschau in Desktop-, Tablet- und Mobilbreite.
- Kopiere HTML, CSS und JavaScript (CDN oder npm) oder lade eine komplette HTML-Seite herunter.
Über Glide.js
Glide.js ist ein winziger (etwa 7 KB min + gzip), abhängigkeitsfreier ES6-Slider, der auf CSS-Transforms basiert. Er konzentriert sich auf das Wesentliche – perView, Abstände, Breakpoints, Autoplay, Wischen und Tastatur – und überlässt Markup und Styling dir. Er eignet sich besonders, wenn die Seitengröße wichtiger ist als Effekte.
Glide-Begriffe
| Option | Bedeutung |
|---|---|
type: 'carousel' | Endlosschleife (klont Slides) |
type: 'slider' | Stoppt am ersten und letzten Slide |
perView, gap | Sichtbare Slides und der Abstand in px |
focusAt: 'center' | Zentriert den aktiven Slide |
breakpoints | Basierend auf max-width: 767: { perView: 1 } |
data-glide-el="controls" | Markup-Hooks für Pfeile (data-glide-dir="<") und Punkte (controls[nav]) |
Was Glide nicht kann
Es gibt keine Fade-, vertikalen oder 3D-Effekte, und die Barrierefreiheit ist nur grundlegend. Ergänze aria-labels für die Bedienelemente (der generierte Code enthält sie bereits). Wenn du diese Funktionen brauchst, wechsle im Generator zu Swiper oder Splide. Deine Einstellungen werden übernommen.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Größe (min + gzip, JS) | ~40 KB (Bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Abhängigkeiten | Keine | Keine | Keine | jQuery |
| Effekte | Slide, Fade, Cube, Coverflow, Flip, Cards, Creative | Slide, Fade | Slide | Slide, Fade |
| Vertikal | Ja | Ja | Nein | Ja |
| Barrierefreiheit | Gut (a11y-Modul) | Ausgezeichnet (ARIA standardmäßig) | Basis | Basis |
| Gepflegt | Ja | Ja | Langsam | Nein (letzte Version 2017) |
| Lizenz | MIT für alle vier | |||
Auch gesucht als: glide js, glidejs carousel, glide slider generator, leichtgewichtiges karussell, glide js beispiel, glide breakpoints, glide js slider, karussell javascript.
Passende Tools zu: Glide.js Slider Generator
- Slider- & Karussell-Generator — Karussells per Klick konfigurieren, statt die Doku zu wälzen: Bibliothek wählen, Breakpoints, Effekte und Steuerung einstellen, die Live-Vorschau prüfen und produktionsreifes HTML, CSS und JavaScript kopieren.
- Swiper Slider Generator — Konfiguriere Swiper 11 mit einem visuellen Editor – responsive Breakpoints, Effekte, Autoplay, Pagination-Typen und mehr – und kopiere sofort einsatzbereites HTML, CSS und JavaScript.
- Splide Slider Generator — Baue ein barrierefreies, schlankes Splide-Karussell, ohne die Doku zu wälzen.
- JavaScript Minifier — JavaScript einfügen und produktionsreifen, minifizierten Code von Terser erhalten — derselben Engine, die Vite, webpack und Rollup nutzen — mit echtem Vorher-Nachher-Vergleich und gzip-Größen.
Häufige Fragen
Unterstützt Glide.js Fade- oder vertikale Slider?
Nein. Glide kann nur horizontal slidern. Für Fade-, vertikale oder 3D-Effekte nutze Swiper oder Splide.
Warum funktionieren meine Glide-Punkte nicht?
Der Punkte-Container braucht
data-glide-el="controls[nav]" und pro Slide einen Button mit data-glide-dir="=index". Der generierte HTML-Code enthält beides.Wird Glide.js noch gepflegt?
Es ist stabil und wird weiterhin häufig eingesetzt, Releases erscheinen aber selten. Da es keine Abhängigkeiten hat, funktioniert es weiter zuverlässig.
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.