So nutzt du: Slider- & Karussell-Generator
- Bibliothek wählen — Swiper, Splide, Glide.js oder Slick — und den Folieninhalt festlegen: Demo-Panels, eigene Bild-URLs oder Karten.
- Folien pro Ansicht für Desktop, Tablet und Mobil festlegen, dazu Abstand, Effekt, Schleife, Autoplay, Pfeile und Pagination.
- Die Live-Vorschau bei Desktop-, Tablet- und Mobilbreite prüfen.
- HTML, CSS und JavaScript kopieren (CDN oder npm) oder eine komplette HTML-Seite herunterladen.
Slider erstellen, ohne Optionen auswendig zu lernen
Jede Karussell-Bibliothek hat dutzende Optionen mit unterschiedlichen Namen: Swipers slidesPerView heißt bei Splide perPage, bei Glide perView und bei Slick slidesToShow. Dieser Generator bietet dir einen einheitlichen Satz an Reglern und schreibt die passende Konfiguration für die gewählte Bibliothek — inklusive responsiver Breakpoints, die jede Bibliothek anders definiert (Swiper arbeitet mobile-first mit min-width, Splide und Glide desktop-first mit max-width, Slick mit einem responsive-Array).
Welche Slider-Bibliothek solltest du nehmen?
| 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) | Hervorragend (ARIA standardmäßig) | Grundlegend | Grundlegend |
| Wartung | Ja | Ja | Langsam | Nein (letzte Version 2017) |
| Lizenz | MIT für alle vier | |||
Swiper ist die beliebteste und leistungsstärkste Wahl — nimm sie, solange du nichts extrem Kleines brauchst. Splide ist leichter und bringt die beste Barrierefreiheit direkt mit. Glide.js ist das kleinste Paket für einfache Karussells. Slick findest du noch häufig auf älteren Seiten und in WordPress-Themes, doch es benötigt jQuery und wird nicht mehr gepflegt. Wähle es nur, wenn du ein bestehendes Projekt weiterführst.
Tipps zu Performance und Barrierefreiheit
- Bilder unterhalb der ersten Folie lazy laden (
loading="lazy"wird für dich ergänzt) und passend zur Folienbreite skalieren — der Bildgrößen-Anpasser und der Kompressor helfen dabei. - Autoplay bei wichtigen Inhalten vermeiden; wenn du es nutzt, Pause bei Hover aktiviert lassen und eine Verzögerung von mindestens 4 Sekunden einstellen.
- Pfeile und Pagination aktiviert lassen, damit Nutzer mit Tastatur und Screenreader navigieren können.
- Karussells im ersten Bildschirm können den Largest Contentful Paint verschlechtern — stelle sicher, dass das erste Bild nicht lazy geladen wird, wenn es dein LCP-Element ist.
Anleitungen zu einzelnen Bibliotheken: Swiper, Splide, Glide.js und Slick. Für Webflow fügst du das HTML in ein Embed-Element ein und das Script vor </body>.
Auch gesucht als: karussell generator, slider generator, bildslider erstellen, responsive slider, slider code generator, html slider, javascript karussell, karussell builder.
Passende Tools zu: Slider- & Karussell-Generator
- Online HTML-Editor — Ein schlanker Code-Spielplatz: Bearbeite HTML, CSS und JavaScript nebeneinander, sieh das Ergebnis sofort, lies die Konsolenausgabe und lade deine Seite als eine HTML-Datei herunter.
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
- CSS Keyframes Generator — Ein visueller Editor für @keyframes.
Häufige Fragen
Welche Slider-Bibliothek ist die beste?
Kann ich den Code in WordPress oder Webflow verwenden?
</body>.