So nutzt du: Swiper Slider Generator
- Pick options for your Swiper 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 Swiper
Swiper is the most widely used touch slider on the web: framework-free, hardware-accelerated and packed with modules — navigation, pagination, autoplay, keyboard, mousewheel, free mode, lazy loading, accessibility and seven transition effects. Version 11 ships as a single bundle for CDN use or as ES modules from npm.
Key options this generator writes
| Option | What it does |
|---|---|
slidesPerView + breakpoints | Slides visible at once; breakpoints are mobile-first (768: { slidesPerView: 2 } applies from 768 px up) |
spaceBetween | Gap between slides in px |
loop | Infinite loop; Swiper 11 needs at least slidesPerView × 2 slides for a smooth loop |
autoplay | delay, pauseOnMouseEnter and disableOnInteraction: false so autoplay resumes after swiping |
effect | fade (with crossFade), cube, coverflow, flip, cards, creative |
pagination.type | bullets, fraction or progressbar |
Styling
Swiper reads the CSS variable --swiper-theme-color for arrows and active bullets; the accent color you pick is written there. Other variables include --swiper-navigation-size and --swiper-pagination-bullet-size.
Using npm and frameworks
Switch the install option to npm to get import Swiper from 'swiper/bundle'. In React, Vue or Svelte you can use Swiper Element (web components) or the official React components with the same options as props.
| 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: swiper js generator, swiper slider, swiper carousel example, swiper breakpoints, swiper autoplay, swiper cdn, swiper coverflow.
Passende Tools zu: Swiper 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.
- 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.
- Glide.js Slider Generator — Create a minimal Glide.js carousel — the ~7 KB, dependency-free slider — with responsive breakpoints, arrows and bullets, and copy the 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
Why does Swiper loop not work?
In Swiper 11 the loop needs enough slides: at least twice the number of slides per view. Add more slides or reduce slidesPerView.
How do Swiper breakpoints work?
They are mobile-first: the base options apply to small screens and each breakpoint key (in px) applies from that width upward.
How do I change the arrow color?
Set
--swiper-theme-color on the slider (the accent color does this), or style .swiper-button-next and .swiper-button-prev.Is Swiper free?
Yes, Swiper is MIT-licensed and free for commercial projects.
Kann ich Swiper Slider Generator als Web-App installieren und offline nutzen?
Ja. Swiper 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.