Este artigo explica como criar um carrossel de imagens usando enimações CSS3, permitindo a transição automática entre múltiplas imagens de forma contínua.
Efeito Implementado
O carrossel alterna entre imagens com uma animação suave, onde cada imagem é exibida por um tempo fixo antes de transitar para a próxima.
Princípio Básico
A animação é controlada por keyframes CSS. No exemplo abaixo, o tempo total da animação é de 10 segundos. Cada imagem é mostrada por aproximadamente 3 segundos, seguida por uma transição de 0.3 segundos para a próxima imagem. A primeira imagem é duplicada no final para garantir uma transição suave de volta ao início.
Código de Exemplo
O código HTML e CSS a seguir implementa um carrossel com imagens de tamanho 300px por 500px. As imagens devem ser substituídas por arquivos reais.
<html>
<head>
<meta charset="UTF-8">
<title>Carrossel CSS3</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.janela-carrossel {
width: 300px;
height: 500px;
overflow: hidden;
position: relative;
}
.faixa-imagens {
width: 1200px;
height: 500px;
list-style: none;
animation: deslocamento 10s linear infinite;
}
.faixa-imagens li {
float: left;
width: 300px;
height: 500px;
}
.faixa-imagens:hover {
animation-play-state: paused;
}
@keyframes deslocamento {
0% { transform: translateX(0); }
30% { transform: translateX(0); }
33% { transform: translateX(-300px); }
63% { transform: translateX(-300px); }
66% { transform: translateX(-600px); }
97% { transform: translateX(-600px); }
100% { transform: translateX(-900px); }
}
</style>
</head>
<body>
<div class="janela-carrossel">
<ul class="faixa-imagens">
<li><img src="imagem1.jpg" alt="Imagem 1"></li>
<li><img src="imagem2.jpg" alt="Imagem 2"></li>
<li><img src="imagem3.jpg" alt="Imagem 3"></li>
<li><img src="imagem1.jpg" alt="Imagem 1"></li>
</ul>
</div>
</body>
</html>
Adaptação para Número Variável de Imagens
Quando o número de imagens não é fixo, podemos ajustar dinamicamente a enimação usando JavaScript. Isso envolve calcular a largura total da faixa de imagens e gerar os keyframes com base na contagem de imagens.
Abaixo, um exemplo simplificado de como inserir regras CSS dinamicamente. Supondo que cada imagem tenha largura de 300 pixels e que a animação total dure 10 segundos, com 3 segnudos de exibição por imagem e 0.5 segundos para transição.
// Variáveis de exemplo
const quantidadeImagens = 5; // Número de imagens dinâmico
const larguraPorImagem = 300;
const duracaoTotal = 10;
const tempoExibicao = 3;
const tempoTransicao = 0.5;
// Ajustar a largura da faixa de imagens
const faixaElemento = document.querySelector('.faixa-imagens');
if (faixaElemento) {
faixaElemento.style.width = (quantidadeImagens * larguraPorImagem) + 'px';
}
// Gerar keyframes dinamicamente
const porcentagens = [];
let acumulado = 0;
for (let i = 0; i < quantidadeImagens; i++) {
const inicioExibicao = (acumulado / duracaoTotal) * 100;
acumulado += tempoExibicao;
const fimExibicao = (acumulado / duracaoTotal) * 100;
acumulado += tempoTransicao;
const inicioTransicao = (acumulado / duracaoTotal) * 100;
porcentagens.push(`${inicioExibicao}% { transform: translateX(${-i * larguraPorImagem}px); }`);
porcentagens.push(`${fimExibicao}% { transform: translateX(${-i * larguraPorImagem}px); }`);
porcentagens.push(`${inicioTransicao}% { transform: translateX(${-(i+1) * larguraPorImagem}px); }`);
}
const regrasKeyframes = `@keyframes animacao-dinamica { ${porcentagens.join(' ')} }`;
// Inserir no stylesheet
const estilos = document.styleSheets;
if (estilos.length > 0) {
estilos[0].insertRule(regrasKeyframes);
}
Este código adapta a animação com base no número de imagens, ajustando automaticamente os pontos-chave dos keyframes e a largura da faixa de imagens.