Como usar: Gerador de Slider e Carrossel
- Escolha uma biblioteca (Swiper, Splide, Glide.js ou Slick) e o conteúdo dos slides: painéis de demonstração, suas próprias URLs de imagens ou cards.
- Defina quantos slides aparecem por vez no desktop, tablet e celular, além do espaçamento, efeito, loop, autoplay, setas e paginação.
- Confira a prévia ao vivo nas larguras de desktop, tablet e celular.
- Copie o HTML, CSS e JavaScript (via CDN ou npm) ou baixe uma página HTML completa.
Gere sliders sem decorar opções
Cada biblioteca de carrossel tem dezenas de opções com nomes diferentes: o slidesPerView do Swiper é o perPage do Splide, o perView do Glide e o slidesToShow do Slick. Este gerador oferece um único conjunto de controles e escreve a configuração correta para a biblioteca escolhida, incluindo os breakpoints responsivos, que cada uma define de um jeito: o Swiper usa min-width com abordagem mobile-first, o Splide e o Glide usam max-width com abordagem desktop-first, e o Slick usa um array responsive.
Qual biblioteca de slider usar?
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Tamanho (min + gzip, JS) | ~40 KB (pacote) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependências | Nenhuma | Nenhuma | Nenhuma | jQuery |
| Efeitos | Slide, fade, cubo, 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 | Pouca atividade | Não (última versão em 2017) |
| Licença | MIT para as quatro | |||
Swiper é a escolha mais popular e mais completa; use-o a menos que precise de algo bem leve. Splide é mais leve e tem a melhor acessibilidade já de fábrica. Glide.js é o menor para carrosséis simples. Slick ainda é comum em sites antigos e temas do WordPress, mas depende do jQuery e não recebe mais manutenção, então escolha-o apenas para manter um projeto existente.
Dicas de desempenho e acessibilidade
- Use lazy-load nas imagens após o primeiro slide (o
loading="lazy"é adicionado para você) e dimensione-as para a largura do slide. O redimensionador de imagens e o compressor ajudam nisso. - Evite autoplay em conteúdos importantes; se usar, mantenha pausar ao passar o mouse ativado e um intervalo de pelo menos 4 segundos.
- Mantenha setas e paginação ativas para que usuários de teclado e leitores de tela consigam navegar.
- Carrosséis na primeira tela podem prejudicar o Largest Contentful Paint. Garanta que a primeira imagem não use lazy-load se ela for o seu elemento LCP.
Guias específicos de cada biblioteca: Swiper, Splide, Glide.js e Slick. No Webflow, cole o HTML em um elemento Embed e o script antes de </body>.
Também pesquisado como: gerador de carrossel, gerador de slider de imagens, gerador de código slider, slider responsivo, criador de carrossel, slider html, carrossel javascript.
Ferramentas que combinam com: Gerador de Slider e Carrossel
- Editor HTML Online — Um playground de código leve: edite HTML, CSS e JavaScript lado a lado, veja o resultado na hora, leia a saída do console e baixe sua página como um único arquivo HTML.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
- Gerador de Keyframes CSS — Um editor visual para @keyframes.
Perguntas frequentes
Qual é a melhor biblioteca de slider?
Posso usar o código no WordPress ou no Webflow?
</body>.