Como usar: Gerador de Slider Glide.js
- Escolha as opções do seu slider Glide.js 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, 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 Glide.js
O Glide.js é um slider em ES6 minúsculo (cerca de 7 KB min + gzip), sem dependências, construído com transforms de CSS. Ele foca no essencial — perView, espaçamentos, breakpoints, autoplay, swipe e teclado — e deixa a marcação e o estilo por sua conta. É ideal quando o peso da página importa mais do que os efeitos.
Terminologia do Glide
| Opção | Significado |
|---|---|
type: 'carousel' | Loop infinito (clona os slides) |
type: 'slider' | Para no primeiro e no último slide |
perView, gap | Slides visíveis e o espaçamento em px |
focusAt: 'center' | Centraliza o slide ativo |
breakpoints | Baseado em max-width: 767: { perView: 1 } |
data-glide-el="controls" | Ganchos de marcação para as setas (data-glide-dir="<") e as bolinhas (controls[nav]) |
O que o Glide não faz
Não há efeitos de fade, vertical ou 3D, e os recursos de acessibilidade são básicos — adicione aria-label aos controles (o markup gerado já inclui). Se você precisar desses recursos, troque o gerador para Swiper ou Splide; suas configurações são mantidas.
| 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 | Deslizar, fade, cubo, coverflow, flip, cards, creative | Deslizar, fade | Deslizar | Deslizar, 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 (último lançamento em 2017) |
| Licença | MIT para os quatro | |||
Também pesquisado como: gerador glide js, carrossel glide js, slider glide.js, carrossel leve javascript, exemplo glide js, glide js breakpoints, glide js responsivo.
Ferramentas que combinam com: Gerador de Slider Glide.js
- 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 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.
- Minificador de JavaScript — Cole seu JavaScript e receba código minificado pronto para produção com o Terser — o mesmo motor usado por Vite, webpack e Rollup — com comparação real antes/depois e tamanhos em gzip.
Perguntas frequentes
O Glide.js suporta fade ou sliders verticais?
Não. O Glide só desliza na horizontal. Use Swiper ou Splide para efeitos de fade, vertical ou 3D.
Por que as bolinhas do Glide não funcionam?
O container das bolinhas precisa de
data-glide-el="controls[nav]" e um botão por slide com data-glide-dir="=index" — o HTML gerado já inclui os dois.O Glide.js ainda tem manutenção?
Ele é estável e continua muito usado, embora as atualizações sejam pouco frequentes. Como não tem dependências, continua funcionando.
Posso instalar o Gerador de Slider Glide.js como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Slider Glide.js é 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.