Como usar: Gerador de Slider Swiper
- Escolha as opções do seu slider Swiper e o conteúdo dos slides: painéis de demonstração, URLs de imagens próprias ou cards.
- Defina os slides por tela para desktop, tablet e celular, o espaçamento, o efeito, o loop, o autoplay, as setas e a paginação.
- Confira a prévia ao vivo nas larguras de desktop, tablet e celular.
- Copie o HTML, CSS e JavaScript (CDN ou npm) ou baixe uma página HTML completa.
Sobre o Swiper
O Swiper é o slider touch mais usado na web: sem dependência de framework, com aceleração por hardware e cheio de módulos — navegação, paginação, autoplay, teclado, roda do mouse, modo livre, lazy loading, acessibilidade e sete efeitos de transição. A versão 11 vem como um único bundle para uso via CDN ou como módulos ES pelo npm.
Principais opções que este gerador escreve
| Opção | O que faz |
|---|---|
slidesPerView + breakpoints | Slides visíveis ao mesmo tempo; os breakpoints são mobile-first (768: { slidesPerView: 2 } vale a partir de 768 px) |
spaceBetween | Espaço entre os slides em px |
loop | Loop infinito; o Swiper 11 precisa de pelo menos slidesPerView × 2 slides para um loop suave |
autoplay | delay, pauseOnMouseEnter e disableOnInteraction: false para o autoplay continuar após o deslize |
effect | fade (com crossFade), cube, coverflow, flip, cards, creative |
pagination.type | bullets, fraction ou progressbar |
Estilo
O Swiper lê a variável CSS --swiper-theme-color para as setas e as bolinhas ativas; a cor de destaque escolhida é gravada ali. Outras variáveis incluem --swiper-navigation-size e --swiper-pagination-bullet-size.
Usando npm e frameworks
Mude a opção de instalação para npm para obter import Swiper from 'swiper/bundle'. No React, Vue ou Svelte você pode usar o Swiper Element (web components) ou os componentes oficiais de React com as mesmas opções como props.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Tamanho (mín + gzip, JS) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependências | Nenhuma | Nenhuma | Nenhuma | jQuery |
| Efeitos | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| Vertical | Sim | Sim | Não | Sim |
| Acessibilidade | Boa (módulo a11y) | Excelente (ARIA por padrão) | Básica | Básica |
| Manutenção | Sim | Sim | Devagar | Não (última versão em 2017) |
| Licença | MIT para as quatro | |||
Também pesquisado como: gerador swiper js, slider swiper, exemplo carrossel swiper, swiper breakpoints, swiper autoplay, swiper cdn, swiper coverflow.
Ferramentas que combinam com: Gerador de Slider Swiper
- Gerador de Slider e Carrossel — Configure um carrossel com cliques, sem precisar ler a documentação: escolha uma biblioteca, defina breakpoints, efeitos e controles, veja a prévia ao vivo e copie HTML, CSS e JavaScript prontos para produção.
- Gerador de Slider Splide — Monte um carrossel Splide acessível e leve sem ler a documentação: defina as opções, veja a prévia em três tamanhos de tela e copie o código.
- Gerador de Slider Glide.js — Crie um carrossel Glide.js mínimo — o slider de ~7 KB, sem dependências — com breakpoints responsivos, setas e bolinhas, e copie o código.
- 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
Por que o loop do Swiper não funciona?
No Swiper 11 o loop precisa de slides suficientes: pelo menos o dobro da quantidade de slides por tela. Adicione mais slides ou reduza o slidesPerView.
Como funcionam os breakpoints do Swiper?
Eles são mobile-first: as opções base valem para telas pequenas e cada chave de breakpoint (em px) vale a partir dessa largura para cima.
Como mudo a cor das setas?
Defina
--swiper-theme-color no slider (a cor de destaque faz isso), ou estilize .swiper-button-next e .swiper-button-prev.O Swiper é gratuito?
Sim, o Swiper tem licença MIT e é gratuito para projetos comerciais.
Posso instalar o Gerador de Slider Swiper como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Slider Swiper é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.