Carrossel usando React e Tailwind

Durante o desenvolvimento de um determinado projeto, geralmente nos deparamos com demandas que rapidamente podem ser resolvidas com o uso de bibliotecas especializadas, como por exemplo o React-Google-Charts para gráficos, ou o Framer Motion para animações.

Todavia, o que fazer quando determinada empresa ou projeto no qual estamos envolvidos não permite o uso de determinadas bibliotecas? Neste momento, meus caros leitores, passamos a depender unicamente de nossas habilidades em fazer tudo o que é necessário sem nenhum meio facilitador.

Pensando nisso, decidimos trazer neste artigo uma forma de criar carrosséis apenas com o uso do React e do Tailwind CSS. Vamos lá!

Antes de mais nada, o que é o React?

O React é uma biblioteca JavaScript de código aberto e utilizado por diversas empresas famosas, como o Facebook, o Instagram, etc. Focado em criar interfaces para o usuário de maneira muito mais prática do que utilizando o JavaScript puro, o React foi ganhando mais e mais espaço por ser de fácil assimilação, compreensão e adaptação.

E o que é o Tailwind CSS?

O Tailwind é um framework criada com o objetivo de otimizar o uso do CSS. Ao invés da estilização ser feita por tags que possuem diversos atributos definidos em um arquivo importado com extensão .css, sua utilização exclui essa necessidade já que cada atributo (como por exemplo width, height, display ou position) possui uma classe com um nome pré-definido pelo Tailwind e está disponibilizado em sua documentação.

Focado no desenvolvimento mobile-first, todo o processo de estilização é acelerado e otimizado com o Tailwind, que além de ser auto intuitivo possui uma documentação de fácil aprendizado e rápida busca: basta colocar o nome do atributo (como por exemplo font-size, font-weight, ou text-decoration) que é disponibilizado todo um passo a passo de como o utilizar o framework.

E por fim, 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 com carrosséis faz com que este tipo de componente seja usado exaustivamente em quase toda aplicação web. Pois bem, hoje é o dia de aprender como criar carrosséis estilizados e implementados sem o uso de nenhum framework ou biblioteca além do Tailwind CSS e do React!

Configurando o React e o Tailwind CSS

A primeira coisa que faremos será criar um projeto onde iremos realizar todo o passo a passo. Para isto, vamos criar um projeto React e instalar o Tailwind CSS com os comandos a seguir que devem ser executados no seu terminal. Se tudo der certo, ao fim da execução destes comandos, será aberto no browser uma página com o símbolo do React em movimento:

npx create-react-app carousel

cd carousel

npm install

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

npm start

Uma vez instalado o Tailwind, precisamos configurá-lo. Primeiro, substitua o conteúdo do arquivo tailwind.config.js que foi criado durante a instalação do framework pelo código que está disposto logo a seguir. Esta implementação fará com que o Tailwind seja utilizado em todos os arquivos do projeto que possuam as extensões js, jsx, ts e tsx:

/**@type {import('tailwindcss').Config} */

module.exports = {

content: [

"./src/**/*.{js,jsx,ts,tsx}",

],

theme: {

extend: {},

},

plugins: [],

}

Por fim, no arquivo css do seu projeto, substitua todo o conteúdo existente nele pelas seguintes sentenças (no nosso caso, faremos este processo no arquivo App.css):

@tailwind base;

@tailwind components;

@tailwind utilities;

Você pode testar se a instalação e configuração do Tailwind funcionaram criando uma classe bg-gray-500 para o container principal do projeto. Se o plano de fundo adquirir a cor cinza, quer dizer que deu tudo certo e o Tailwind foi instalado e implementado corretamente. Caso contrário, veja o passo a passo diretamente no site do Tailwind. Não se esqueça de apagar a classe bg-gray-500 após constatar que o uso do framework funcionou, ok?

Criando um Carrossel com botões de navegação

Chegamos ao momento que todos esperávamos: finalmente com tudo configurado e preparado, iremos dar os primeiros passos para construir nosso Carrossel. Que tal começarmos criando um componente chamado Carousel e inserindo nele uma lista de imagens que utilizaremos para a exibição alternada de acordo com a interação do usuário?

No elemento section que pode ser visualizado na figura 2, utilizamos as classes Tailwind para, respectivamente, fazer com que o elemento ocupe 100% da largura da tela (w-full) e tenha uma altura do tamanho da tela de exibição (h-screen).

Também utilizamos a classe flex para poder centralizar verticalmente os botões com a classe items-center. Já na div que se encontra dentro do elemento section, utilizamos a classe flex para alinhar todos os itens lado a lado, como está disposto na figura 4. Todavia, ainda não é isto que queremos, concorda? Que tal criarmos dois botões que irão avançar e retornar os itens que serão exibidos em tela?

No elemento div no qual os botões estão inclusos, inserimos a classe absolute para sobrepor o botão nos elementos de imagem existentes no carrossel. Também utilizamos a classe flex para centralizar verticalmente os botões com a classe items-center. Por fim, informamos com h-full que o elemento possuirá a altura total cedida pelo elemento que o contém.

Já no botão, criamos espaçamentos internos horizontais e verticais com as classes px-2 e py-4, além de uma margem externa para deslocar um pouco ambos os botões com as classes mr-1 e ml-2. Note também que, até então, os botões ao serem clicados executam as funções previous e next, que ainda não possuem nada: tudo ao seu tempo, meus caros, paciência!

Uma vez criados os botões e os elementos do carrossel, iremos transferir o scroll de navegação para dentro do elemento principal que contém as imagens. Desta forma, nossa página passará a ter apenas a largura total da tela e o item que irá exceder além dela. Veja:

Conseguimos fazer isto através das classes overflow-x-scroll e scroll-smooth. A primeira cria um scroll para o elemento no eixo X e a segunda suaviza a navegação e transição entre os elementos dentro do scroll.

Precisamos agora utilizar um hook useRef que, dentre suas atribuições, nos permite criar referências para um determinado elemento. Para tal, importaremos ele do React e criaremos uma constante que receberá a chamada desta função, que a princípio terá o valor nulo. Depois, adicionaremos esta referência no elemento que contém as imagens por meio da propriedade ref. Veja:

Agora, só falta relacionarmos os botões com esta referência criada. Se você utilizar o console.log em refCarousel, verá que será retornado um objeto com uma chave current. Dentro dela, há uma gama de outras chaves, das quais iremos focar apenas em scrollLeft.

Esta chave armazena a posição do scroll que criamos, em relação à esquerda. É ele que iremos alterar sempre que os botões forem criados, aumentando ou diminuindo determinada quantidade da posição de acordo com cada botão clicado.

Perceba que agora não precisamos mais mover o scroll de rolagem para navegar entre os itens, pois os botões fazem isso quando clicamos neles. Todavia, ainda falta uma pequena questão: não queremos que o scroll fique aparecendo, concorda? Para ocultá-lo, basta substituir a classe overflow-x-scroll por overflow-x-hidden no elemento div que contém as imagens.

Criando navegação automática no Carrossel

Concluímos um carrossel que depende de botões para navegação entre seus itens, mas e se ao invés de botões, quiséssemos que nosso carrossel se movesse automaticamente? Para isso, nos valeremos do hook useEffect e da função setInterval.

O hook useEffect é utilizado para trazer para a componentização de funções o conceito e aplicação de ciclo de vida de componentes. Ele recebe dois argumentos como parâmetro, sendo o primeiro uma função e o segundo um parâmetro opcional. Utilizaremos neste segundo parâmetro um array vazio para que o useEffect execute uma única vez logo quando o componente é montado. Desta forma, assim que nossa aplicação for carregada, a função dentro do useEffect irá executar.

Em seu interior utilizaremos o setInterval, uma função JavaScript que nos permite que, a cada determinado intervalo de tempo, determinada ação seja executada. Faremos então com que, a cada um segundo, o scroll seja movido. Se ele chegar até o fim da exibição, retornará para o início.

Considerações finais

Hoje vimos as duas formas mais comuns de se implementar carrosséis: uma com botões para a navegação e outra com a navegação automática entre seus itens.

É importante destacar que esta é apenas uma das formas de se criar este tipo de componente sem o uso de bibliotecas ou frameworks além do React e Tailwind, respectivamente, mas sinta-se livre para deixar a sua imaginação e criatividade fluírem para pensar em outras formas!

Bons estudos e até logo!