No desenvolvimento web hoje em dia nós meio que nos tornamos dependentes do JavaScript, seja escrevendo efeitos e funções na mão, seja empregando frameworks cada vez mais complexos para resultados simples. Com isso, vem uma sucessão de dependências, versões, problemas de manutenção, compatibilidade de navegadores…
Já estamos nessa há tanto tempo que algumas vezes esquecemos que existem outras formas de implementar as mesmas soluções. Outras vezes, nós sequer sabíamos que era possível fazer algo sem o uso de JavaScript! Você sabia que é possível criar um slideshow, um carrossel de imagens que vão passando automaticamente, sem uma única linha de script?
Não é mágica, nem gambiarra, apenas um bom uso do poder do CSS.
Você começa da mesma forma que começaria um slideshow convencional: com um elemento que irá conter as imagens e atribuindo uma classe a ele. Esse elemento irá “mascarar” a existência das outras imagens. No nosso exemplo, usaremos um <section class=”carrossel-mascara”> para facilitar a compreensão. Esse elemento terá uma largura fixa e a propriedade overflow configurada para “hidden”, para que seja exibida apenas uma imagem de cada vez e as imagens não gerem uma nova linha. Certifique-se também que a largura do container e a largura das imagens sejam idênticas, para gerar uma transição suave.
<section class=”carrossel-mascara”>
<div class=”carrossel-container slide”>
<img src=”https://codigofonte.com.br/wp-content/uploads/2018/08/tekken-7.jpg”/>
<div class=”carrossel-texto”>
<p>É possível até mesmo inserir texto entre os slides!</p>
</div>
<img src=”https://codigofonte.com.br/wp-content/uploads/2018/10/shadow-warrior-2.jpg”/>
<img src=”https://codigofonte.com.br/wp-content/uploads/2018/08/prey-mooncrash.jpg”/>
</div>
</section>
O CSS dos elementos que envolvem o slideshow ficaria assim:
.carrossel-mascara{
width: 600px; /* tem a mesma largura das imagens*/
margin: 0 auto;
overflow: hidden;
font-size: 0; /* para remover o espaço entre elementos-filho marcados como inline-block*/
}
.carrossel-container {
width: 2400px; /* a soma da largura de todos os elementos */
transition: 1s ease;
height: 337px; /* tem a mesma altura das imagens */
}
Especifique também o tamanho de cada elemento interno, para que não haja margem para erros de renderização:
.carrossel-container img, .carrossel-texto {
width: 600px;
height: auto;
display: inline-block;
vertical-align:top;
font-size: 16px;
margin: 0 auto;
}
.carrossel-texto {
height: 337px;
position: relative;
}
.carrossel-texto p {
position: relative;
text-align: center;
}
A grande pergunta agora é: como criar a animação sem usar JavaScript? Usando CSS Animation na classe “slide” . Essa animação irá mover os elementos pelo eixo de X, enquanto o elemento da frente atua como uma máscara, simulando uma transição.
.slide {
animation: slide 20s ease infinite;
}
Para que a transição seja perfeita, será necessário fazer um cálculo simples: multiplicar o número de elementos que compõe o carrossel pelo tempo desejado de cada transição. Desta forma, se queremos uma transição que dure cinco segundos e temos, de acordo com o exemplo acima, quatro slides (três com imagens e um com texto), o resultado final da animação seria 5×4 = 20.
Mas existe um truque adicional: keyframes. Como está, nossa animação passa direto, sem nunca realmente parar em cada slide, o que prejudica a experiência do usuário. Não é assim que um carrossel em JavaScript funcionaria! Para simular a pausa entre cada elemento, precisamos adicionar keyframes falsos por cada slide. Durante esses frames invisíveis, a transição não acontece.
@keyframes slide {
0% {
transform: translateX(0%);
}
12.5% {
transform: translateX(0%);
}
25% {
transform: translateX(-25%);
}
37.5% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
62.5% {
transform: translateX(-50%);
}
75% {
transform: translateX(-75%);
}
87.5% {
transform: translateX(-75%);
}
99% {
transform: translateX(-75%);
}
100% {
transform: translateX(0);
}
}
Perceba que isso acima é CSS puro, não foi necessário adicionar nenhum “keyframe” ao código HTML e esse recurso funcionaria com qualquer número de slides.
Se você deseja simular a pausa quando o usuário move o mouse sobre a animação, também é possível fazer isso sem usar JavaScript. Basta manipular o evento :hover do elemento para mudar o estado da animação:
.carrossel-container:hover {
animation-play-state: paused;
}
Desta forma, você consegue um carrossel de imagens, sem mexer em scripts, sem carregar arquivos adicionais no navegador do usuário e perfeitamente funcional.
