Como usar: Gerador de Slider Splide
- Escolha as opções do seu slider Splide e o conteúdo dos slides: painéis de exemplo, suas próprias URLs de imagem ou cards.
- Defina os slides por visualização 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 em larguras de desktop, tablet e celular.
- Copie o HTML, o CSS e o JavaScript (CDN ou npm) ou baixe uma página HTML completa.
Sobre o Splide
O Splide é um slider sem dependências, com cerca de 12 KB (min + gzip), conhecido pela acessibilidade: ele adiciona automaticamente roles ARIA, rótulos, regiões ao vivo e suporte a teclado, seguindo o padrão WAI-ARIA para carrosséis. Ele suporta os modos loop e fade, autoplay com botão de play/pause, lazy loading, sliders verticais e extensões como auto-scroll e vídeo.
Opções geradas pelo gerador
| Opção | Significado |
|---|---|
type | slide, loop ou fade (o fade mostra um slide por vez; use rewind para repetir) |
perPage, gap | Slides por página e o espaçamento como medida CSS |
breakpoints | Desktop-first: 1023: { perPage: 2 } se aplica até 1023 px |
autoplay, interval, pauseOnHover | Reprodução automática |
focus: 'center' | Centraliza o slide ativo |
direction: 'ttb' + height | Slider vertical (é necessária uma altura fixa) |
drag: 'free' | Modo de rolagem livre com inércia |
Estilizando o Splide
Importe splide.min.css (ou o CSS core, para controle total) e depois sobrescreva .splide__arrow e .splide__pagination__page.is-active. O CSS gerado faz isso com a sua cor de destaque.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Tamanho (min + 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 |
| Mantido | Sim | Sim | Pouco | Não (último lançamento em 2017) |
| Licença | MIT para as quatro | |||
Também pesquisado como: slider splide, carrossel splide js, splide carousel, splide breakpoints, splide autoplay, splide cdn, carrossel acessível, gerador de carrossel.
Ferramentas que combinam com: Gerador de Slider Splide
- 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 Swiper — Configure o Swiper 11 com um editor visual — breakpoints responsivos, efeitos, autoplay, tipos de paginação e mais — e copie HTML, CSS e JavaScript prontos para uso.
- 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.
- Verificador de Contraste — Informe uma cor de texto e uma cor de fundo para obter a razão de contraste WCAG exata, o resultado de aprovado ou reprovado em cada nível, uma pontuação APCA e correções com um clique que mantêm o seu tom.
Perguntas frequentes
Por que o fade do Splide mostra só um slide?
O tipo fade sempre mostra um slide por página. Use o tipo slide ou loop para ter vários slides.
Os breakpoints do Splide são min-width ou max-width?
Por padrão são max-width (desktop-first). Defina
mediaQuery: 'min' para mudar para mobile-first.O Splide é acessível?
Sim. Ele aplica atributos ARIA, navegação por teclado e anúncios para leitores de tela por padrão, e essa é a sua principal vantagem.
Posso instalar o Gerador de Slider Splide como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Slider Splide é 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.