Crie um carrossel no React com Swiper

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.

Disponível em https://brunocabralsilva.github.io/guia-das-matilhas/

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.

Disponível em: https://swiperjs.com/

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

⚠️
OBS - Ao longo deste tutorial será utilizado o npm como ferramenta de gerenciamento de pacotes, mas sintam-se à vontade para utilizar o que lhes for mais confortável.

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’.
Figura 3: Criando componente Carrossel e importando o Swiper

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.

⚠️
OBS - Para melhor visualização do que estamos construindo, foram criadas duas classes, que organizam melhor o que está encapsulado pelo componente SwiperSlide.

Todavia, não precisa se preocupar ou se ater ao que está configurado nelas: organizar o estilo interno do que deve ser apresentado em cada item do carrossel é uma tarefa específica para cada tipo de situação.
Figura 4: Adicionando o componente SwiperSlide
Figura 5: CSS básico para simples exibição
Figura 6: Primeiros slides criados com Swiper

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:

Figura 7: Importando Pagination e Navigation

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:

Figura 8: Criando a propriedade modules no Swiper

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.

⚠️
OBS - Para Navigation e Pagination, o Swiper concede uma estilização básica, assim como no componente Swiper. Todavia, isso não quer dizer que não podemos sobrepor o que é padrão desta biblioteca com nossa própria estilização!

Basta criar no arquivo css as classes swiper-pagination-bullet (cada ícone de página), swiper-pagination-bullet-active (ícone de página ativo), swiper-button-prev (botão de navegação para exibir paginação anterior do carrossel) e swiper-button-next (botão de navegação para exibir próxima paginação do carrossel), conforme exemplificado na figura 10.
Figura 9: Configurando Pagination e navigation
Figura 10: Estilizando o css das classes de navigation e pagination
Figura 11: Carrossel com a implementação de pagination e navigation

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:

Figura 12: Import da funcionalidade Autoplay
Figura 13: Carrossel com a funcionalidade Autoplay habilitada em 1 segundo

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:

Figura 14: Configurando a propriedade direction
Figura 15: Carrossel com a funcionalidade direction no sentido vertical

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!

⚠️
As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.