Slick.js – Fazer um carrossel nunca foi tão fácil

Se você já desenvolveu alguns sites durante a sua carreira como desenvolvedor(a) web, tenho certeza que eventualmente você já teve que fazer um carrossel (ou carousel, se preferir). Para quem está estranhando o termo, estou me referindo àquele componente que utilizamos para mostrar várias imagens em um determinado espaço do site, quase como um slideshow.

Geralmente estes mecanismos disponibilizam controles de pausa, avanço e retrocesso para que os usuários possam voltar ou olhar melhor os itens a qualquer momento da navegação. A imagem abaixo exemplifica bem um carrossel:

Garanto que se você procurar na internet como fazer este componente, encontrará mil e uma soluções prontas e vários outros jeitos diferentes se fazer ele na mão. Neste artigo, quero te apresentar umas dessas soluções que me chamou bastante atenção e que tenho usado em uma série de projetos recentemente, inclusive no meu site pessoal e o da minha empresa; estou falando do Slick.

Fazendo carrossel nunca mais será um problema

Essa pequena biblioteca open source↳Open source71 conteúdosComo o Open Source Está Liberando o Poder da Automação para TodosDev (Back & Front) · out 2025Código aberto: programadores criam software da NASA sem saberDev (Back & Front) · abr 2021N8N: O que é a ferramenta open source que está revolucionando a automação em TI?Dev (Back & Front) · dez 2025Ver tudo em Dev (Back & Front) → (disponibilizada sob licença MIT) criada por Ken Wheeler (atual diretor de open source na Formidable Labs, Inc) e que hoje já possui mais de 21000 estrelas no GitHub, torna o trabalho de criar um carrossel algo extremamente fácil. O melhor de tudo é que não precisamos abrir mão de flexibilidade e customização. Resumindo, ela nos ajuda sem nos prender a suas limitações.

Ela funciona a partir do IE8+ e dá suporte aos navegadores modernos mais utilizados no mercado, tais como: Google Chrome, Safari e Firefox (desktop e mobile). Para demonstrar como ela funciona, vou criar um pequeno projeto que você poderá acessar no final do artigo (através do CodePen).

Criando o primeiro carrossel

O primeiro passo é obter os arquivos necessários da biblioteca. Como ele faz uso do jQuery (1.7+), também precisaremos dele. Para facilitar a didática, há links no CDN da CloudFlare que podemos utilizar.

// JS
https://code.jquery.com/jquery-1.11.0.min.js
https://code.jquery.com/jquery-migrate-1.2.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js

// CSS
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css

Feito isso, já estamos prontos para utilizá-lo. Para criar um carrossel, basta criamos um elemento que servirá como container e então inserir os elementos (slides) dentro dele, algo bem parecido com o que fazemos com as colunas e linhas do Bootstrap (recentemente escrevi sobre o Bootstrap 4 neste artigo), por exemplo. No nosso caso, o primeiro passo será criar uma div com a classe carousel.

<div class="carousel">
</div>

Agora, para cada slide que queremos exibir, vamos colocar o seu conteúdo dentro de uma div. Como este é um exemplo bem didático, vou apenas inserir uma imagem dentro de cada uma.

<div class="carousel">
  <div><img src="https://i.imgur.com/3aIutJi.png" alt="js" /></div>
  <div><img src="https://i.imgur.com/rWtGeQ0.png" alt="java" /></div>
  <div><img src="https://i.imgur.com/8946bSF.png" alt="python"/></div>
  <div><img src="https://i.imgur.com/9Hc7hjb.png" alt="kotlin" /></div>
  <div><img src="https://i.imgur.com/uZDEpjX.png" alt="scala" /></div>
  <div><img src="https://i.imgur.com/eQoyQjy.png" alt="C#" /></div>
  <div><img src="https://i.imgur.com/ko3iAbu.png" alt="PHP" /></div>
  <div><img src="https://i.imgur.com/Afkz5od.png" alt="dotnet" /></div>
</div>

O terceiro e último passo, é dizer ao Slick como queremos o nosso carrossel. Para isso, basta usar o seletor do jQuery e invocar o método slick(). Dentro deste método, podemos passar uma infinidade de parâmetros para personalizar e expandir o funcionamento do carrossel (todos eles estão muito bem documentados aqui). Se não passarmos nenhum parâmetro, o carrossel simplesmente será construído com as configurações padrões. Mas para fins de demonstração, vou inserir alguns parâmetros.

$('.carousel').slick({
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,
});

Repare no que fizemos aqui. Inserimos 5 propriedades, sendo que:

• dots: Exibe umas bolinhas brancas abaixo dos slides, mostrando quantas opções estão disponíveis. É falso por padrão.
• infinite: Indica que ao chegar a última opção, retorna ao primeiro item novamente. Também é falso por padrão.
• speed: Nada mais é que a velocidade da transição entre os slides (em ms).
• slidesToShow: número de slides a serem exibidos
• slidesToScroll: o número de slides que são escrolados

E pronto, você já tem o seu carrossel funcionando! Bem bacana, né? Dê só uma olhada no projeto final (acesse o exemplo diretamente no CodePen através deste link).

Na página do GitHub do projeto há inúmeros exemplos do que é possível fazer com a biblioteca, desde simples carrossel, até mesmo:

• Com tamanho variado para cada elemento
• Responsivo
• Com altura adaptável
• Centralizado
• Lazy Loading
• Fade
• E muito mais!

Todos os exemplos são facilmente reproduzíveis no CodePen disponibilizado acima. Pegue este exemplo que está no artigo e faça seus próprios experimentos! Basta copiar o código que está lá e colar no painel para ver como ele altera o seu carrossel. Tenho certeza de que você irá gostar!

Versão em vídeo

Se você quiser ver as explicações e exemplos com mais detalhes, também gravei um vídeo sobre o tema e está disponível no YouTube.

Conclusão

O Slick é apenas mais uma biblioteca JavaScript criada para facilitar a nossa vida, mas como o próprio slogan diz, é “o último carrossel que você precisará”. Sua instalação e uso são tão fáceis que é quase irresistível utilizá-la. Há várias opções disponíveis no mercado, mas poucas são tão eficientes quanto o Slick.

Referências

• https://medium.com/code-prestige/slick-fazer-um-carrossel-no-seu-site-nunca-foi-t%C3%A3o-f%C3%A1cil-c1399d9da3fa
• http://kenwheeler.github.io/slick/