So nutzt du: Splide Slider Generator
- Wähle die Optionen für deinen Splide-Slider und den Folieninhalt: Demo-Flächen, eigene Bild-URLs oder Karten.
- Lege die Folien pro Ansicht für Desktop, Tablet und Mobile fest, dazu Abstand, Effekt, Loop, Autoplay, Pfeile und Pagination.
- Prüf die Live-Vorschau in Desktop-, Tablet- und Mobile-Breite.
- Kopiere HTML, CSS und JavaScript (CDN oder npm) oder lade eine komplette HTML-Seite herunter.
Über Splide
Splide ist ein abhängigkeitsfreier Slider mit rund 12 KB (min + gzip), der vor allem für seine Barrierefreiheit bekannt ist: Er ergänzt automatisch ARIA-Rollen, Labels, Live-Regionen und Tastaturunterstützung nach dem WAI-ARIA-Carousel-Muster. Er unterstützt Loop- und Fade-Modi, Autoplay mit Play/Pause-Button, Lazy Loading, vertikale Slider und Erweiterungen wie Auto-Scroll und Video.
Vom Generator erzeugte Optionen
| Option | Bedeutung |
|---|---|
type | slide, loop oder fade (fade zeigt eine Folie; mit rewind lässt sie sich wiederholen) |
perPage, gap | Folien pro Seite und der Abstand als CSS-Länge |
breakpoints | Desktop-first: 1023: { perPage: 2 } gilt bis 1023 px |
autoplay, interval, pauseOnHover | Automatische Wiedergabe |
focus: 'center' | Zentriert die aktive Folie |
direction: 'ttb' + height | Vertikaler Slider (eine feste Höhe ist erforderlich) |
drag: 'free' | Freies Scrollen mit Momentum |
Splide gestalten
Importiere splide.min.css (oder das Core-CSS für volle Kontrolle) und überschreibe dann .splide__arrow und .splide__pagination__page.is-active. Das generierte CSS macht das mit deiner Akzentfarbe.
| 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 (letzter Release 2017) |
| Lizenz | MIT für alle vier | |||
Auch gesucht als: splide js, splide slider, splide karussell, splide breakpoints, splide autoplay, splide cdn, barrierefreies karussell.
Passende Tools zu: Splide 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.
- Glide.js Slider Generator — Erstelle ein schlankes Glide.js-Karussell, den nur etwa 7 KB großen Slider ohne Abhängigkeiten, mit responsiven Breakpoints, Pfeilen und Punkten, und kopiere den Code.
- Kontrast-Checker — Gib eine Text- und eine Hintergrundfarbe ein, und du erhältst das exakte WCAG-Kontrastverhältnis, Bestanden/Nicht bestanden für jede Stufe, einen APCA-Wert und Korrekturen mit einem Klick, die deinen Farbton behalten.
Häufige Fragen
Warum zeigt Splide beim Fade nur eine Folie?
Der Fade-Typ zeigt immer eine Folie pro Seite. Für mehrere Folien nutze den Typ slide oder loop.
Sind Splide-Breakpoints min-width oder max-width?
Standardmäßig max-width (Desktop-first). Setze
mediaQuery: 'min', um auf Mobile-first umzustellen.Ist Splide barrierefrei?
Ja. Es setzt standardmäßig ARIA-Attribute, Tastaturnavigation und Ankündigungen für Screenreader, und genau das ist sein größter Vorteil.
Kann ich Splide Slider Generator als Web-App installieren und offline nutzen?
Ja. Splide 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.