+
Skip to content

Gildaciolopes/creative-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Projeto de Carrossel de Imagens

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.

Funcionalidades

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.

Tecnologias Utilizadas

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.

Animações:

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

Como Usar

Clone o repositório:

git clone https://github.com/seuusuario/creative-js.git

Abra o projeto:

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

Contribuição

😄 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.

About

Carrossel de imagens de carros de luxo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载