Como usar: 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 | |||
Também pesquisado como: swiper js generator, swiper slider, swiper carousel example, swiper breakpoints, swiper autoplay, swiper cdn, swiper coverflow.
Ferramentas que combinam com: 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.
- Redimensionador de imagens — Redimensione uma foto para dimensões exatas em pixels ou uma porcentagem, recorte-a para se ajustar ao tamanho de uma rede social ou encaixe-a dentro de uma moldura com uma cor de fundo — tudo isso diretamente no seu navegador.
Perguntas frequentes
Why does Swiper loop not work?
How do Swiper breakpoints work?
How do I change the arrow color?
--swiper-theme-color on the slider (the accent color does this), or style .swiper-button-next and .swiper-button-prev.