Este é um projeto simples de carrossel de imagens interativo com efeitos visuais utilizando animações CSS. O projeto inclui setas de navegação para percorrer as imagens e um indicador de progresso no estilo de pontos que mudam de cor de acordo com o estado atual do carrossel.
Carrossel de Imagens: Navegue pelas imagens dos carros com as setas de "próximo" e "anterior".
Indicadores de Navegação: Pontos de progresso que mostram qual imagem está ativa no momento.
Efeitos: Ao navegar pelas imagens, o carro inicia andando pra frente ou pra trás, de acordo com o botão apertado, e após isso ele inclina em um ângulo de 20 graus e as informações do carro o acompanham.
HTML5: Para estruturar o conteúdo da página. CSS3: Para o estilo visual e animações. JavaScript: Para a lógica de navegação do carrossel. Como Funciona
Estrutura do Carrossel: O carrossel contém 3 imagens dentro de um contêiner. A cada interação com o botão de navegação (próximo ou anterior), a imagem ativa é trocada.
Indicadores: Abaixo do carrossel, há um conjunto de indicadores (pontos). Cada ponto representa uma imagem no carrossel. O ponto ativo é destacado, e muda de cor e tamanho.
A transição das imagens é feita com um efeito de deslizar para a esquerda ou direita. A animação dos indicadores simula um seletor de imagem
git clone https://github.com/seuusuario/creative-js.git
Navegue até a pasta do projeto. Abra o arquivo index.html no seu navegador. Interaja com o carrossel:
Clique nas setas de navegação para avançar ou voltar as imagens. Observe a animação dos indicadores enquanto as imagens mudam. Exemplo de Estrutura de Arquivos
/seuprojeto
/index.html
/style.css
/script.js
😄 Sinta-se à vontade para fazer um fork deste projeto, criar suas próprias melhorias ou corrigir problemas! Se você encontrar algum bug ou desejar sugerir uma melhoria, abra uma issue ou envie um pull request.