Slick — Fazer um carrossel no seu site nunca foi tão fácil

Se você trabalha com desenvolvimento web, provavelmente em algum ponto da sua carreira teve que lidar com um carrossel (ou carousel, se preferir). Para quem está estranhando o termo, um carrossel nada mais é que uma maneira de exibir imagens em um website, onde deixamos uma imagem em destaque e por meio de setas — ou mesmo automaticamente — as imagens vão mudando. É muito usado em sites de notícias e entretenimento.

A milenar arte do carrossel!

Na internet existem inúmeras opções para nos ajudar a montar esses componentes. Não vou perder tempo falando dessas bibliotecas, porque quero focar na que chamou a minha atenção recentemente, a Slick.

Essa pequena biblioteca open source criada por Ken Wheeler torna o trabalho de criar um carrossel extremamente fácil, sem que o desenvolvedor tenha que abrir mão da flexibilidade e customização. Ela funciona a partir do IE8+ e dá suporte aos navegadores modernos mais utilizados, tais como: Google Chrome, Safari e Firefox.

Para demonstrar como ela funciona, vou criar um pequeno projeto que você poderá acessar ao final do artigo. Então vamos lá.

Primeiro Passo

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. Não se esqueça de inserir o jQuery antes do Slick, caso contrário surgirão problemas.

Segundo Passo

Agora que temos o Slick adicionado ao projeto, precisamos criar os elementos que serão navegáveis no carrossel. Para este exemplo, criei apenas oito, mas fique à vontade para criar quantos o seu coração mandar. Vou dar a classe de nome carousel a este elemento.

Terceiro Passo

Por fim, é necessário associar o elemento ao Slick. 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. Se não passarmos nenhum parâmetro, o carrossel será construído com todas as configurações padrões do Slick. Mas para fins de demonstração, vou inserir alguns parâmetros.

E pronto, você já tem o seu carrossel funcionando! Bem bacana né? Dê só uma olhada no projeto final.

Se tiver problemas para visualizar, tente acessar o link na página do CodePen

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
  • Etc

Todos os exemplos são facilmente reproduzíveis no CodePen. Pegue este exemplo que está no artigo e faça seus próprios experimentos! Tenho certeza de que você irá gostar.

Versão em Vídeo

Para quem quiser ver um bom resumo prático desse artigo, também gravei uma versão em vídeo:

Se inscreva no nosso canal!
Gostou? Recomende 👏 este artigo , comente, acompanhe nossa publicação e compartilhe!
Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br — Facebook, Twitter, Youtube
Like what you read? Give Diego Martins de Pinho a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.