How to use the 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 colour 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) |
| Licence | MIT for all four | |||
Tools that pair well with the 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.
- Image Resizer — Resize a photo to exact pixel dimensions or a percentage, crop it to fill a social-media size, or fit it inside a frame with a background colour — all locally in your browser.
Frequently asked questions
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 colour?
Set
--swiper-theme-color on the slider (the accent colour does this), or style .swiper-button-next and .swiper-button-prev.Is Swiper free?
Yes, Swiper is MIT-licensed and free for commercial projects.