Existem várias bibliotecas prontas que podem ser usadas para implementar um carrossel infinito em seu projeto. No entanto, se pararmos para analisar, nem sempre faz sentido adicionar mais complexidade e peso ao seu código, mesmo que seja uma biblioteca leve.
Agora, vamos ao que interessa.
Primeiro, vamos criar uma estrutura HTML com os logos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coding with Robby</title>
</head>
<body>
<div class="logos">
<div class="logos-slide">
<img src="./logos/3m.svg" />
<img src="./logos/barstool-store.svg" />
<img src="./logos/budweiser.svg" />
<img src="./logos/buzzfeed.svg" />
<img src="./logos/forbes.svg" />
<img src="./logos/macys.svg" />
<img src="./logos/menshealth.svg" />
<img src="./logos/mrbeast.svg" />
</div>
</body>
</html>
Sua página deve estar incrível assim! 😄
Vamos começar a trabalhar com o CSS.
Primeiro, vamos remover os espaçamentos da tela e adicionar uma cor de fundo à página.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f2f2f2;
}
Agora, vamos ajustar todas as imagens para que fiquem com o mesmo tamanho.
.logos-slide img {
height: 50px;
}
O próximo passo é alinhar todos os logos em uma única linha e ocultar a barra de rolagem.
.logos {
overflow: hidden;
white-space: nowrap;
}
Agora, para a satisfação da experiência do usuário (UX), vamos adicionar espaçamento entre os logos e uma cor de fundo. Para isso, faremos uma alteração no CSS que já criamos.
.logos {
overflow: hidden;
white-space: nowrap;
padding: 60px 0;
background-color: #FFFFFF;
}
.logos-slide img {
height: 50px;
margin: 0 40px;
}
Agora, precisamos adicionar um pouco de movimento aos logos. Vamos criar a animação do carrossel utilizando keyframes e animation.
A ideia é fazer o movimento ocorrer com o translateX de 0 a -100%, e então aplicar essa transição na animation.
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.logos-slide {
animation: 35s slide infinite linear;
}
Como você pode ver, ao chegar ao final, há um espaço em branco e o carrossel salta de volta para o início.
Para resolver isso, basta duplicar a div do logos no HTML e adicionar display: inline-block no CSS da classe logo-slide."
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coding with Robby</title>
</head>
<body>
<div class="logos">
<div class="logos-slide">
<img src="./logos/3m.svg" />
<img src="./logos/barstool-store.svg" />
<img src="./logos/budweiser.svg" />
<img src="./logos/buzzfeed.svg" />
<img src="./logos/forbes.svg" />
<img src="./logos/macys.svg" />
<img src="./logos/menshealth.svg" />
<img src="./logos/mrbeast.svg" />
</div>
<div class="logos-slide">
<img src="./logos/3m.svg" />
<img src="./logos/barstool-store.svg" />
<img src="./logos/budweiser.svg" />
<img src="./logos/buzzfeed.svg" />
<img src="./logos/forbes.svg" />
<img src="./logos/macys.svg" />
<img src="./logos/menshealth.svg" />
<img src="./logos/mrbeast.svg" />
</div>
</body>
</html>
.logos-slide {
display: inline-block;
animation: 35s slide infinite linear;
}
É isso! Este é um ótimo exemplo de como criar um carrossel usando apenas CSS.
Como mencionei no início, podemos fazer isso utilizando bibliotecas prontas ou até mesmo JavaScript. No entanto, às vezes, não precisamos complicar nosso projeto — nem a nossa vida! 😄
Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.
Top comments (0)