Como usar: Gerador Slick Slider
- Escolha as opções do seu slider Slick e o conteúdo dos slides: painéis de demonstração, 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 o preview 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 Slick
O Slick (“o último carrossel que você vai precisar”) foi o carrossel jQuery padrão por anos e ainda está presente em muitos temas WordPress, lojas Shopify e sites legados. Ele oferece breakpoints responsivos, modo centro, fade, deslize vertical, lazy loading e autoplay. Sua última versão (1.8.1) é de 2017 e depende do jQuery.
Opções do Slick
| Opção | Significado |
|---|---|
slidesToShow / slidesToScroll | Slides visíveis e quantos avançam a cada clique |
responsive | Array de { breakpoint, settings }; cada um se aplica abaixo da largura do breakpoint |
infinite | Repete os slides em loop |
autoplay, autoplaySpeed | Reprodução automática e intervalo |
fade | Transição com fade (um slide por vez) |
centerMode | Centraliza o slide ativo com vizinhos parcialmente visíveis |
Espaçamento entre slides
O Slick não tem opção de espaçamento. O CSS gerado adiciona margem horizontal em .slick-slide e uma margem negativa em .slick-list para que as bordas externas continuem alinhadas.
Ainda vale usar o Slick?
Para um site existente que já carrega jQuery e Slick, manter a consistência faz sentido. Para projetos novos, Swiper ou Splide são menores, mantidos, mais acessíveis e não precisam de jQuery. Troque a biblioteca acima e o gerador converte suas configurações.
| 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 | Lentamente | Não (última versão em 2017) |
| Licença | MIT para as quatro | |||
Também pesquisado como: slick slider, slick carousel, exemplo slick slider, slick responsivo, slick autoplay, carrossel jquery, cdn slick.
Ferramentas que combinam com: Gerador Slick Slider
- 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.
- 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.
Perguntas frequentes
O Slick exige jQuery?
Como adiciono espaço entre os slides do Slick?
.slick-slide e uma margem negativa correspondente em .slick-list. O gerador escreve isso automaticamente a partir do valor de espaçamento.