React carousel: como criar carrosséis responsivos em React

Grande parte das pessoas desenvolvedoras de sites ou sistemas já se depararam com o desafio de fazer um carrossel de fotos em sua aplicação. Nesse caso, além de criar o carrossel, também é preciso superar os desafios de ter uma boa qualidade de imagens e trazer uma estrutura responsiva, que se adapte a qualquer tipo de dispositivo móvel.

Com isso, programadores(as) podem ter dificuldades no desenvolvimento de um carrossel de fotos usando React, pois podem recorrer ao uso de bibliotecas complexas e não saber manipular elas. Além disso, o tratamento das fotos também precisa ser um ponto de atenção para evitar que seja inserida uma foto grande e ela fique distorcida na estrutura.

Como facilitar todo esse processo? Bom, existem muitas bibliotecas que podem simplificar a criação de um carrossel, desde a manipulação das fotos até a customização dos botões da estrutura. Conheceremos hoje a estrutura react-carousel, presente na biblioteca React.js. Vamos nessa!

Vamos falar sobre: 

O que é o React carousel e para que serve?

O React Carousel é uma biblioteca que auxilia na criação de carrosséis de imagem. Um carrossel é uma animação contendo imagens deslizantes na tela, que se movimentam de um lado para o outro com ou sem a ação do usuário(a). Também podem ser utilizados textos ao invés de imagens na estrutura.

Quais as diferenças entre React carousel e React responsive carousel?

Na tabela a seguir, apresentamos algumas diferenças entre essas duas estruturas que auxiliam na criação de carrosséis no React.js:

React Carouselreact-responsive-carousel
Alto nível de customização;Presença de renderização do lado do servidor (server-side rendering);
Sem renderização do lado do servidor;Carregamento possivelmente mais lento;
Depende da biblioteca react-bootstrap para funcionar, pois é um componente da mesma;Tempo de duração de animações customizável;
Possibilidade de customização da altura e largura das fotos do carrossel.Independe do react-bootstrap para o funcionamento, já que é uma biblioteca disponível no NPM para instalação;
Possibilidade de customização do modo de apresentação.

Contudo, a principal diferença está no suporte das duas ferramentas. No GitHub da biblioteca react-responsive-carousel há um aviso de que o autor somente mescla solicitações de pull-request e que não consegue dar muito suporte a quem precisar. Veja:

Aviso exibido na biblioteca react-responsive-carousel, onde é possível ler "Important: I don't have any time available to keep maintaining this package."

Ou seja, o autor não possui tempo hábil para manter esse pacote. 

Conheça as propriedades do React carousel!

Confira na tabela a seguir algumas das propriedades existentes no React carousel:

NomeValorPropriedade utilizada para
asDefinir um elemento para esse componente. Esse elemento pode ser personalizado
activeIndexControlar o slide carregado inicialmente na estrutura. 
defaultActiveIndex0Definir o índice ativo no carrossel. 
controlsverdadeiroExibir os botões de próximo ou anterior na estrutura.
fadefalsoExibir uma animação entre os slides quando estiverem em movimento. 
indicatorLabels[]Indicar uma matriz de rótulos para os indicadores do carrossel.  
indicatorsverdadeiroExibir um conjunto de indicadores que facilitam a navegação no carrossel. 
interval5000Definir qual o tempo de atraso entre o ciclo automático de um item.
keyboardverdadeiroVerificar se o carrossel reagirá a eventos de teclado da pessoa usuária ou não.
nextIcon<span aria-hidden=”true” className=”carousel-control-next-icon” />   Substituir o ícone padrão da seta que representa o item seguinte da estrutura.  
nextLabel‘Próximo’Exibir o elemento seguinte do carrossel. Esse rótulo é exibido somente nos leitores de tela. 
onSelectDisparar uma função quando o item ativo do carrossel é alterado.
onSlidDisparar uma função quando o slide do carrossel é finalizado.
onSlideDisparar uma função quando o slide do carrossel é iniciado.
pause‘hover’Parar o carrossel com base em eventos do mouse, teclado, etc.  
prevIcon<span aria-hidden=”true” className=”carousel-control-prev-icon” />Substituir o ícone padrão da seta que representa o item anterior da estrutura.  
prevLabel‘Anterior’Exibir o elemento anterior do carrossel. Esse rótulo é exibido somente nos leitores de tela. 
slideverdadeiroPossibilitar a animação entre as imagens do carrossel. 
touchverdadeiroDeterminar se o carrossel poderá ter eventos de deslize para esquerda e direita em dispositivos sensíveis ao toque na tela, como tablets. 
variant‘escuro’Determinar qual será a cor dos controles, indicadores e legendas.
wrapverdadeiroVerificar se o carrossel precisará ter uma pausa brusca ou se será contínuo. 
bsPrefix‘carousel’Trabalhar com os estilos do CSS utilizando o Bootstrap, dando alto suporte de customização.

Além dessas propriedades gerais existentes no React carousel, também existem as propriedades de item e as de legenda: 

Propriedades de Item:

NomeValorPropriedade utilizada para
asDefinir um elemento para este componente. Esse elemento pode ser personalizado
intervalverdadeiroDefinir qual o tempo de atraso entre o ciclo automático de um item.
bsPrefix‘carousel’Trabalhar com os estilos do CSS utilizando o Bootstrap, dando alto suporte de customização.

Propriedades de legenda: 

NomeValorPropriedade utilizada para
asDefinir um elemento para este componente. Esse elemento pode ser personalizado
bsPrefix‘carousel’Trabalhar com os estilos do CSS utilizando o Bootstrap, dando alto suporte de customização.

Quais são os métodos do React carousel?

Vejamos na tabela a seguir alguns dos métodos existentes no React carousel: 

NomeValorMétodo responsável por
showArrowsverdadeiroExibir as setas “Anterior” e “Próximo”. 
showStatusverdadeiroExibir o índice atual do carrossel.
showIndicatorsverdadeiroExibir pequenos pontos ou quadrados para movimentar o carrossel. 
showThumbsverdadeiroExibir as miniaturas de fotos no carrossel.
thumbWidthindefinidoDefinir qual será a largura que as fotos em formato miniatura terão no carrossel.
infiniteLoopfalsoAdicionar um loop infinito no carrossel, ou seja, ele não parará a execução, independente do evento realizado.
selectedItemDefinir qual será o item selecionado, inicialmente.
axishorizontalConverter a orientação horizontal ou vertical do carrossel. 
onChangeExecutar alguma função no carrossel quando as posições do carrossel forem atualizadas. 
onClickItem Executar alguma função no carrossel quando um item for clicado.
onClickThumb Executar alguma função no carrossel quando uma miniatura for clicada.
stopOnHover verdadeiroParar a reprodução de fotos do carrossel quando o mouse estiver em cima dele. 
interval 3000Definir o intervalo de tempo na reprodução automática.
transitionTime 350Definir qual será o tempo do intervalo de transição das fotos em milissegundos. 
swipeable verdadeiroPermitir que a pessoa usuária faça movimentos de deslizar a tela no carrossel.  
dynamicHeightfalsoGerenciar a altura que o carrossel terá, caso seja preciso.
centerMode falsoPermitir a visualização centralizada com slides anteriores e seguintes.
labels opcionalPermitir a especificação de rótulos adicionados aos controles do carrossel.
onSwipeStart Executar alguma função no carrossel quando um gesto de passar o dedo é inicializado.
onSwipeEndExecutar alguma função no carrossel quando um gesto de passar o dedo é concluído.
onSwipeMoveExecutar alguma função no carrossel quando um gesto de passar o dedo é concluído.

Quais as vantagens de usar o React carousel?

O React carousel possibilita um alto nível de customização do carrossel em seu site, como animações, personalização dos ícones existentes no carrossel, inclusão de efeitos especiais para as transições de imagens. 

Como vimos nas propriedades e métodos acima, você pode disparar eventos via funções para eventos de mouse, de teclado, de deslizar com o dedo, etc. Além disso, podemos substituir o ícone padrão do carrossel com qualquer outro de nossa preferência utilizando o nextIcon e o prevIcon.

Quais as desvantagens de usar o React carousel?

A principal desvantagem de utilizá-lo é que pode acontecer de você fazer a instalação do react-bootstrap, que contém vários recursos, e utilizar somente o componente de carrossel. Ou seja, você realiza a instalação de uma biblioteca de vários recursos e utilizou apenas um. Os componentes que não forem utilizados ocuparão uma carga desnecessária no projeto. 

Como instalar e usar o React carousel? Passo a passo!

Criando o projeto React

Antes de tudo, a primeira etapa é criarmos uma aplicação React digitando o seguinte comando em seu terminal ou prompt de comando

npx create-react-app meu_aplicativo

Depois de digitado o comando, aperte Enter para a sua aplicação ser criada. Quando ela se encerrar, entre na pasta digitando o comando

cd meu_aplicativo

E aperte Enter. Quando estiver na pasta de seu projeto, instale o react-bootstrap.

Instalando o React carousel

Como vimos, o React Carousel nada mais é do que um componente existente na biblioteca react-bootstrap. Ou seja, precisamos instalar a biblioteca react-bootstrap em nosso projeto com os seguintes comandos: 

npm install react-bootstrap 

npm install bootstrap


Após a instalação dessas bibliotecas já podemos utilizar o React carousel em nossa aplicação. Para isso, devemos importar logo no começo dos arquivos que utilizaremos as seguintes linhas: 

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';

Entendendo a estrutura do React carousel

Observe a imagem a seguir, referente à estrutura do carrossel:

Na imagem da estrutura do carossel vemos três retângulos que compõem o carrossel. O primeiro é o Div.Inner, que é referente ao Item #1. O segundo é o Div.Carousel, que é referente ao Item #2. Este está cercado por um retângulo vermelho. O terceiro é o Div.Item, referente ao Item #3.

Nesse caso: 

  • Div.Carousel será o componente global, que ficará por volta de toda a estrutura;
  • Div.Item serão nossos itens únicos, ou seja, as imagens presentes no carrossel;
  • Div.Inner será utilizado para inserir os controles de movimento ao carrossel;

Criando um React carousel básico

Ao inserir o código a seguir, no arquivo App.js de nossa aplicação:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel  from 'react-bootstrap/Carousel';
  
export default function App() {
  return (
    <div>
      <h4>React-Bootstrap Carousel Component</h4>
      <Carousel>
        <Carousel.Item>
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20210425122739/2-300x115.png"
            alt="Image One"
          />
        </Carousel.Item>
        <Carousel.Item>
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20210425122716/1-300x115.png"
            alt="Image Two"
          />
        </Carousel.Item>
      </Carousel>
    </div>
  );
}

Teremos o seguinte resultado:

Mas, esse carrossel ainda pode ser melhorado com as estilizações, não é?

Estilizando o React carousel

Vamos aproveitar as classes que o Bootstrap possui para estilizar as imagens:

Imagem do código, onde podemos ver que foram adicionadas classes do Bootstrap nas linhas de "className"

Em cada item, adicionamos um display block neles com uma largura de 100. Na div que percorrerá o carrossel, os seguintes estilos foram adicionados:

Imagem do código, onde podemos ver que foram adicionados os estilos: "width: 700, padding: 30"

O resultado, após a estilização, será o seguinte:

Adicionando intervalo ao React carousel

Podemos adicionar um intervalo no carrossel utilizando a propriedade interval. Ela é responsável por definir o intervalo de tempo na reprodução automática:

Imagem do código, onde podemos ver que foi adicionada a propriedade interval na linha <Carousel.Item interval={1500}>

Após a adição do intervalo, o resultado será o seguinte: 

Note que, como o tempo de intervalo da segunda imagem é menor, ela ficará menos tempo em exibição se comparada com a primeira imagem, que possui um tempo maior. 

Adicionando legendas ao React carousel

Utilizando a propriedade Carrossel.Caption, podemos adicionar legendas em nosso carrossel conforme o exemplo a seguir: 

Imagem do código, onde podemos ver que foram adicionadas legendas no código

O resultado com a inserção das legendas será o seguinte:

Usando animações no React Carousel

Para finalizar nosso exemplo, vamos adicionar uma animação em nosso carrossel, utilizando a propriedade fade. Adicionamos ela juntamente ao componente global Carousel: 

Imagem do código, onde podemos ver que foi adicionada uma animação de fade na linha <Carousel fade>

O resultado será o seguinte:

O resultado do exemplo completo, utilizando as estilizações, intervalos, animações e legendas no arquivo App.js é o seguinte: 

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel  from 'react-bootstrap/Carousel';
  
export default function App() {
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>React-Bootstrap Carousel Component</h4>
      <Carousel fade>
        <Carousel.Item interval={1500}>
          <img
            className="d-block w-100"
            src="https://media.geeksforgeeks.org/wp-content/uploads/20210425122739/2-300x115.png"
            alt="Image One"
          />
          <Carousel.Caption>
            <h3>Label for first slide</h3>
            <p>Sample Text for Image One</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item interval={500}>
          <img
            className="d-block w-100"
            src="https://media.geeksforgeeks.org/wp-content/uploads/20210425122716/1-300x115.png"
            alt="Image Two"
          />
          <Carousel.Caption>
            <h3>Label for second slide</h3>
            <p>Sample Text for Image Two</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  );
}

Vamos exibir outros exemplos de utilização do React Carousel no decorrer deste artigo, então fique com a gente! Veja agora alguns dos componentes que podem também ser utilizados para criação de carrosséis.

Quais os 14 melhores componentes React carousel?

1- fullPage.js

Logo do componente fullPage.js

fullPage.js funciona rolando a página inteira de uma vez e indo para a próxima seção quando o usuário rola para baixo. É totalmente responsivo, não tem dependências e é bastante leve. Ele deve ser usado em tela cheia e permite criar slides verticais e horizontais ao mesmo tempo.

2- Swiper

Logo do componente Swiper

Swiper fornece suporte RTL, layouts de slides de várias linhas e vários efeitos de transição. Além disso, ele contém algumas técnicas avançadas, como Slides Virtuais e “Controle de duas vias”, que permite usar o Swiper como controlador para qualquer número de outros Swipers.

3- React Slick

Logo do componente React Slick

Slick nasceu como um plugin JavaScript e WordPress e agora foi portado para React pela comunidade. Os recursos dele são como de qualquer outro carrossel, mas o Slick possui um efeito de desvanecimento em cima do de rolagem usual.

4- React Swipeable

Logo do componente React Swipeable

Nessa estrutura, você pode mover o controle deslizante seguindo um padrão específico enquanto desliza. Isso não é uma coisa que você encontrará facilmente em outros componentes, o que o torna bastante único.

5- React Responsive Carousel

Logo do componente React Responsive Carousel

Ele suporta miniaturas prontas para uso, rolagem vertical e também vem com um efeito de desbotamento. Ele também oferece opções mais avançadas, como renderização no lado do servidor, carregamento lento e modo de apresentação. Contudo, o recurso de arrastar não é tão suave quanto em outros carrosséis ao soltar o botão do mouse ou tirar o dedo da tela.

6- Pure React Carousel

Ao contrário de outros carrosséis, o Pure React Carousel não fornecerá todo o estilo necessário para o seu carrossel. Ele espera que você crie seu próprio estilo. Além dos efeitos de deslizamento esperados, este carrossel também oferece uma opção de zoom. Algo não muito comum em outras estruturas. 

7- React Flickity

Homepage do React Flickity

Ao contrário de outros plugins, o Flickity não fornecerá muitas opções responsivas e talvez possa falhar nesse aspecto quando comparado a outros. Ele também oferece uma opção para adicionar um botão “mostrar em tela cheia” que pode ser útil. Ou seja, o Flickity é ideal para carrosséis que não precisarão se adaptar muito no responsivo.

8- React Image Gallery

Fornece uma maneira de adicionar miniaturas ao carrossel principal e suporta navegação RTL. Além disso, ele vem com algumas funções de renderização para podermos criar nossos próprios renders para coisas como a navegação, os botões play e pause, bem como os itens de paginação e a exibição do carrossel em tela cheia.

9- React AwesomeSlider

Homepage do React Awesome Slider

O que torna o React AwesomeSlider diferente de outros carrosséis é o tipo de transição que ele fornece: desde transições de cubo 3D para desdobráveis, dimensionáveis, etc. Ele não pode conter vários itens no carrossel como outros podem, mas desde que isso não seja um problema, essa é uma ótima opção para escolher.

10- Nuka Carousel

Um carrossel bastante completo e funcional. Ele suporta rolagem vertical e três tipos diferentes de transições, como rolar, desaparecer e rolar 3D. Além disso, tem uma opção extra para ativar o zoom.

    11- React Id Swiper

Esse componente é focado em fornecer uma ótima experiência em dispositivos móveis. Projetado especialmente para sites móveis, aplicativos da Web para dispositivos móveis e aplicativos nativos/híbridos para dispositivos móveis em mente. Funciona para iOS, Android, Windows Phone e navegadores modernos.

    12- React Swipe

Esse carrossel também é um pouco mais básico do que muitos outros, mas faz seu trabalho muito bem e é bastante leve (embora seja um componente pago). Visa fornecer uma solução básica para dispositivos de toque e não suporta arrastar com o mouse.

   13-  React Owl Carousel

Logo do componente React Owl Carousel 2

React Owl Carousel foi construído em jQuery e, assim, pode ser um pouco obsoleto para alguns usos. Fora isso, funciona como esperado. Ele fornece opções responsivas, hash de URL, carregamento lento, reprodução automática e arrastar.

14- React Alice Carousel

Slider simples que oferece opções responsivas, animações de desvanecimento, modo de reprodução automática, suporte a RTL e recursos de arrastar. Ele também contém algumas opções avançadas como, vários itens em um slide e uma opção de “estratégia de controle” para personalizar os elementos de navegação.

3 exemplos de uso do React carousel na prática!

Já vimos alguns exemplos práticos de animações, intervalos e a presença de legendas no carrossel. Vamos apresentar mais alguns exemplos práticos:

a) Exemplo 1: controles do carrossel com uma variante escura

Vamos supor que, em seu sistema, você precise de uma variação escura dos indicadores de seu carrossel. Para isso, utilizaremos a propriedade variant, juntamente com a tag Carousel, a tag global para esse componente.

Imagem do código, onde podemos ver que foi adicionada a variente escura em <Carousel variant="dark">

Como apresentado anteriormente, o Carousel.Item seria cada imagem presente no carrossel e, o Carousel.Caption seria a legenda presente nas imagens dos slides. O resultado da variante acima será: 

b) Exemplo 2: Carrossel pausado com efeito hover

Através da propriedade pause podemos parar o seu ciclo de exibição de fotos ao passar o mouse no carrossel. Caso essa propriedade seja definida como falsa, o ciclo automático do carrossel não será pausado. Para inserir essa pausa, definimos a propriedade como hover:

Imagem do código, onde podemos ver que foi adicionado o efeito hover para quando o carrossel estiver parado, na linha <Carousel pause+"hover">

O resultado será o seguinte: 

Observe que, quando o cursor do mouse fica em cima do carrossel, ele não é movimentado.

c) Exemplo 3: Carrossel sem a presença de controles e indicadores

Podemos deixar o nosso React Carousel sem os indicadores e os controles deles através das propriedades controls e indicators, setando o valor dessas propriedades como falso:

Imagem do código, onde podemos ver que foi adicionada a propriedade na linha <Carousel controls={false} indicators={false}>

Como esses valores são propriedades do componente, os valores ficarão entre chaves, pois são similares às props (propriedades do React). O resultado será o seguinte:

Por uma questão de melhor usabilidade de sua aplicação, o mais indicado é que o carrossel tenha os controles horizontais e verticais para manipulá-lo.

Conclusão

O React Carousel é uma excelente estrutura para auxiliar na construção de carrosséis. Sua estrutura é customizável e permite que sejam incorporados vários métodos e propriedades nele, deixando a estrutura mais poderosa. Também podem ser inseridas propriedades de legendas e de itens. 

Esse componente está presente na biblioteca react-bootstrap e sua utilização depende dela. Além desse componente, existem muitas outras estruturas apresentadas no artigo que permitem a criação de um carrossel de forma simples no React.js. No caso, você observou o quão simples é a criação, a estrutura e a configuração desse componente em uma aplicação. 

Para aprofundar os seus conhecimentos em React.js, confira esse artigo sobre React Hooks!