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 (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
De 0 a 10, o quanto você recomendaria este artigo para um amigo?