Crie um carrossel no React com Swiper

No universo das demandas do desenvolvimento web existem muitos conceitos essenciais que precisam estar presentes no currículo do programador que deseja se apresentar ao mercado de trabalho.

Saber criar barras de navegação, menus flutuantes ou expansivos, cabeçalhos e rodapés são exemplos de componentização que o desenvolvedor deve dominar na ponta dos dedos e da língua, uma vez que quase toda aplicação existente possui estes componentes para uma boa funcionalidade, organização e aceitação por parte do usuário final.

Dentre estes conhecimentos essenciais, entraremos no mundo dos carrosséis aplicados ao React com o uso de uma biblioteca incrível chamada Swiper.

Mas afinal, o que são carrosséis?

Carrossel é o nome que se dá para a apresentação de informações na tela de maneira cadenciada e organizada ao ponto de, em uma lista que contém diversos itens, sejam apresentados apenas alguns deles por vez, de acordo com a configuração feita pelo programador, alternando e ficando visível em tela por meio da interação do usuário.

A organização e beleza da apresentação de conjuntos de dados com carrosséis faz com que este tipo de componente seja usado exaustivamente em quase toda aplicação web. Afinal, quem nunca lidou e interagiu com um em uma rede social ou em um site e-commerce? Pois bem, hoje é o dia de aprender com o auxílio do Swiper como carrosséis são criados, estilizados e implementados.

E o que é o Swiper?

O Swiper é uma biblioteca de javascript criado e utilizado para a apresentação na forma de slides de uma forma moderna, estilizada e fácil de se implementar, disponível em Angular, Vue, Solid, Svelte e, é claro, React, que é o que abordaremos neste artigo.

Trata-se de uma biblioteca muito completa, que disponibiliza efeitos de transições e alternâncias, efeitos 3D e parallax, paginação, navegação, auto rolagem, etc. Todavia, sem mais delongas, que tal sairmos um pouco do campo dos conceitos e colocarmos a mão na massa?

Passo a Passo

1 - Criando um projeto React

Antes de mais nada, o primeiro passo (como é esperado) é criar uma aplicação React. Sendo assim, vamos nomear o nosso primeiro projeto utilizando o Swiper com um nome intuitivo. Que tal carrossel-em-react?

npx create-react-app carrossel-em-react

cd carrossel-em-react

npm start

2 - Instalando o Swiper

A instalação do Swiper é muito intuitiva. Basta executar o seguinte comando dentro da pasta raíz do projeto criado:

npm install swiper

3 - Crie um componente e importe o Swiper

Partindo do conceito de desenvolvimento do React, quanto mais “componentizada” for sua aplicação web, mais eficaz e reaproveitável ela será. Desta forma, iremos criar um componente chamado Carrossel utilizando o conceito de classes (caso prefira utilizar funções no lugar de classes, não há nenhum problema, visto que a implementação do Swiper será a mesma). Começaremos importando alguns componentes e arquivos necessários para que o Swiper funcione de maneira correta:

• Primeiro, importaremos o componente Swiper de ‘swiper/react’ - É dentro dele que criaremos a apresentação de itens no modo carrossel;
• Por fim, importaremos o arquivo css básico do swiper - O Swiper possui arquivos css que fazem a magia da estilização acontecer por trás dos panos; para este início, basta importar apenas o arquivo ‘swiper/css’.

Fácil, não? Todavia, se você tentou executar em seu browser, nada foi exibido. Isto acontece porque ainda não criamos os itens que serão apresentados por meio do carrossel. É o que faremos no próximo passo.

4 - Criando os itens que serão exibidos no Carrossel

Como já foi dito, dentro do componente Swiper iremos criar cada item que será apresentado no formato de carrossel. Para que a biblioteca entenda que determinado trecho de código ou componente representa um item para o carrossel, precisamos envolvê-lo com o componente SwiperSlide que deve ser importado também de ‘swiper/react’, assim como o componente Swiper foi.

Já podemos notar o quanto o Swiper é eficaz ao realizarmos tão pouco haja vista a quantidade de retorno visual que já nos é disponibilizado. Mas calma, isso é só o começo! O Swiper concede muito mais ferramentas e iremos conhecer as mais importantes e essenciais para criar um carrossel profissional! Você está pronto?

5 - Principais ferramentas do Swiper

A partir de agora, tudo o que iremos fazer é puro capricho. As configurações apresentadas devem ser utilizadas de acordo com cada necessidade da aplicação, não dependendo umas das outras necessariamente. Vamos lá?

5.1 Navigation e Pagination

As ferramentas Navigation e Pagination são os primeiros comandos a serem apresentados porque de fato são os mais utilizados em carrosséis. Enquanto o Navigation habilita em tela dois botões para que o usuário clique e alterne os itens dispostos em tela (seja para o próximo item, ou para o item anterior), o Pagination disponibiliza um guia, clicável ou não, de quantas páginas aquele carrossel possui. Cada página possui um número de itens de acordo com a configuração da nossa aplicação.

Para utilizar estas duas ferramentas, começamos importando seus respectivos componentes de ‘swiper’, bem como também seus respectivos arquivos css conforme apresentado na imagem:

Uma vez importados estes itens, precisamos informar ao Swiper que estamos utilizando estes componentes no carrossel que estamos criando. Esta configuração é feita por meio da criação de uma propriedade no componente Swiper chamada modules, que receberá como valor um array com o Navigation e o Pagination:

O próximo passo é informar como queremos que cada item seja exibido e disposto em tela. Criamos para isso novas propriedades no componente Swiper, chamadas pagination e navigation. Para navigation, basta repassar como valor true ou false: de acordo com a informação (true para positivo e false para negativo), os botões de navegação ficarão disponíveis na tela. Já para Pagination, além da possibilidade de também ser passada um valor booleano para habilitar ou não a paginação exibida em tela, também é possível informar se ela é interativa ao clique ou não. Para isto, passamos um objeto com a chave clickable e o valor booleano true ou false.

5.2 Autoplay

Nem sempre queremos que os itens dispostos em um carrossel só sejam alternados quando há alguma interação do usuário. Para que eles alternem automaticamente na tela utilizamos o componente Autoplay.

A forma como implementamos o componente Autoplay é semelhante ao que fizemos para Navigation e Pagination: primeiro importamos o componente Autoplay de 'swiper', depois o adicionamos na propriedade modules e, por fim, definimos o delay de alternância entre os itens passando um objeto com a chave delay e valor igual ao tempo (em milissegundos) para a propriedade chamada autoplay, dentro do componente Swiper:

5.3 Direction

É possível definir qual a direção que desejamos que o nosso carrossel se desloque. Por meio da propriedade direction também no componente Swiper é possível informar se desejamos o sentido horizontal ou vertical. Por padrão, os itens são deslocados no modo horizontal em direção ao lado esquerdo e, no modo vertical, de baixo para cima:

5.4 SlidesPerView e loop

Finalizando as principais ferramentas do Swiper, temos as propriedades slidesPerView e loop. Enquanto o slidesPerView define quantos itens estarão visíveis e dispostos na tela por vez, o loop garante que, ao chegar no fim da lista de itens do carrossel, o botão de próximo não será desabilitado. Ao invés disso, ao clicá-lo, voltar-se-á ao primeiro item da lista. Da mesma forma se comporta o botão de anterior caso chegue ao primeiro item da tela: ao clicá-lo, se avançará para o último item da lista. Desta forma, chegamos finalmente ao modelo final do nosso carrossel:

Conclusão

Todo processo de aprendizado é um processo longo e, no mundo da programação, sempre envolve prática. Se você não conseguiu de primeira, reveja cada um dos passos deste tutorial e tente novamente, pois sem a menor sombra de dúvidas vocẽ conseguirá! É importante destacar que este foi só um gostinho do que o Swiper pode proporcionar a quem o utiliza, é claro, visto que é uma ferramenta vasta com diversas e diversas formas de criar e estilizar carrosséis.

Aqui, você aprendeu todas ferramentas básicas para uma apresentação de itens e informações, mas não se limite a isso: consulte a documentação do Swiper e aprenda cada vez mais! Clicando aqui você será direcionado para o site do Swiper, onde são disponibilizadas algumas demonstrações de possibilidades com o Swiper. Bom deleite!