Animação de carrossel com rolagem infinita usando apenas CSS

Introdução#

Nós amamos JavaScript, é claro. Mas é sempre divertido ver o que podemos alcançar apenas com CSS – especialmente quando se trata de animações, já que animações em CSS costumam ser "menos pesadas" do que animações em JavaScript.

Neste post, eu vou te mostrar como criar uma animação de carrossel com rolagem infinita e pausa ao passar o mouse, usando apenas CSS. Aqui está um preview do que vamos construir:

Criando uma linha de cartões#

Primeiro, vamos criar a estrutura básica do nosso carrossel. Considere uma linha de cartões:

Parece bom, certo? Os cartões podem ser seus banners elegantes, imagens de produtos ou qualquer coisa que você queira exibir em seu carrossel.

Duplicando os cartões#

Como queremos que o carrossel seja infinito, ele deve estar conectado de ponta a ponta. Instintivamente, podemos tentar repetir os cartões:

Veja o resultado:

Somente o primeiro conjunto de cartões é visível. Se você conferir o HTML, verá que o segundo conjunto de cartões está oculto e segue o primeiro conjunto.

Animando o carrossel#

Hora de animar o carrossel! Como temos dois conjuntos de cartões conectados, podemos animar o carrossel transformando os grupos de cartões. Veja como:

Ainda temos um último toque a acrescentar: pausar a animação ao passar o mouse sobre o carrossel. Isso dará aos usuários a chance de ver o conteúdo com mais clareza. Como temos dois conjuntos de cartões, precisamos pausar ambos os grupos ao passar o mouse sobre o carrossel:

É isso! 🎊 Agora o carrossel pausará quando você passar o mouse sobre ele.

Considerações finais#

CSS é poderoso, e é sempre divertido explorar o que podemos alcançar com ele. Existem também outras propriedades em CSS, como scroll-snap-type e scroll-snap-align, que podem te ajudar a criar um carrossel interativo. Feliz codificação! 🚀