0 Compartilhamentos 117 Views

Como criar um slideshow sem usar uma linha de JavaScript

30 de novembro de 2018

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.

Você pode se interessar

Promoções de Jogos do Final de Semana (22/03)
Notícias
6 visualizações
Notícias
6 visualizações

Promoções de Jogos do Final de Semana (22/03)

Carlos L. A. da Silva - 22 de março de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Como substituir os produtos da Adobe pagando nada ou muito pouco
Dicas
7 visualizações
Dicas
7 visualizações

Como substituir os produtos da Adobe pagando nada ou muito pouco

Carlos L. A. da Silva - 22 de março de 2019

Você não precisa morrer em uma grana para ter acesso a produtos de qualidade que fazem as mesmas tarefas.

Vídeos
1,655 compartilhamentos6,805 visualizações

Reagindo a Vagas de Estágio // Vlog React #91

Thais Cardoso de Mello - 21 de março de 2019

Confira no vídeo se o que dizem sobre os estágio no Brasil realmente faz sentido.

Deixe um Comentário

Your email address will not be published.

Mais publicações

A Inteligência Artificial que era perigosa demais
Artigos
4 visualizações
4 visualizações

A Inteligência Artificial que era perigosa demais

Carlos L. A. da Silva - 21 de março de 2019
TypeScript // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,808 visualizações
1,655 compartilhamentos6,808 visualizações

TypeScript // Dicionário do Programador

Thais Cardoso de Mello - 18 de março de 2019
Promoções de Jogos do Final de Semana (15/03)
Notícias
12 visualizações
12 visualizações

Promoções de Jogos do Final de Semana (15/03)

Carlos L. A. da Silva - 15 de março de 2019
Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista
Vídeos
1,655 compartilhamentos6,812 visualizações
1,655 compartilhamentos6,812 visualizações