So nutzt du: Swiper Slider Generator
- Wähle die Optionen für deinen Swiper-Slider und den Slide-Inhalt: Demo-Panels, eigene Bild-URLs oder Karten.
- Lege Slides pro Ansicht für Desktop, Tablet und Mobil fest, dazu Abstand, Effekt, Loop, Autoplay, Pfeile und Pagination.
- 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 Swiper
Swiper ist der meistgenutzte Touch-Slider im Web: framework-unabhängig, hardwarebeschleunigt und mit vielen Modulen – Navigation, Pagination, Autoplay, Tastatur, Mausrad, freier Modus, Lazy Loading, Barrierefreiheit und sieben Übergangseffekte. Version 11 gibt es als einzelnes Bundle für die CDN-Nutzung oder als ES-Module über npm.
Wichtige Optionen, die dieser Generator schreibt
| Option | Was sie macht |
|---|---|
slidesPerView + breakpoints | Gleichzeitig sichtbare Slides; Breakpoints sind mobile-first (768: { slidesPerView: 2 } gilt ab 768 px aufwärts) |
spaceBetween | Abstand zwischen den Slides in px |
loop | Endlosschleife; Swiper 11 braucht mindestens slidesPerView × 2 Slides für eine saubere Schleife |
autoplay | delay, pauseOnMouseEnter und disableOnInteraction: false, damit Autoplay nach dem Wischen weiterläuft |
effect | fade (mit crossFade), cube, coverflow, flip, cards, creative |
pagination.type | bullets, fraction oder progressbar |
Styling
Swiper liest die CSS-Variable --swiper-theme-color für Pfeile und aktive Bullets; die gewählte Akzentfarbe wird dort geschrieben. Weitere Variablen sind --swiper-navigation-size und --swiper-pagination-bullet-size.
npm und Frameworks
Stelle die Installationsoption auf npm, um import Swiper from 'swiper/bundle' zu erhalten. In React, Vue oder Svelte kannst du Swiper Element (Web Components) oder die offiziellen React-Komponenten mit denselben Optionen als Props verwenden.
| 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) | Einfach | Einfach |
| Gepflegt | Ja | Ja | Langsam | Nein (letzte Version 2017) |
| Lizenz | MIT für alle vier | |||
Auch gesucht als: swiper js generator, swiper slider erstellen, swiper carousel beispiel, swiper breakpoints, swiper autoplay, swiper cdn, swiper coverflow, slider code generator.
Passende Tools zu: Swiper 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.
- Splide Slider Generator — Baue ein barrierefreies, schlankes Splide-Karussell, ohne die Doku zu wälzen.
- 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.
- Bildgrößenänderer — Passe die Größe eines Fotos auf exakte Pixelabmessungen oder einen Prozentsatz an, schneide es so zu, dass es die Größe eines Social-Media-Beitrags ausfüllt, oder passe es in einen Rahmen mit einer Hintergrundfarbe ein – alles direkt in deinem Browser.
Häufige Fragen
Warum funktioniert der Swiper-Loop nicht?
Wie funktionieren Swiper-Breakpoints?
Wie ändere ich die Farbe der Pfeile?
--swiper-theme-color am Slider (die Akzentfarbe erledigt das), oder gestalte .swiper-button-next und .swiper-button-prev direkt.