Como ele é
Pense num painel de fotos que vira de página. Cada foto aparece grande e centralizada, e o componente ocupa todo o espaço que você reservar para ele, como o topo da página. A cada troca, a foto atual sai deslizando do quadro, na vertical por padrão ou para o lado no modo horizontal, e em seguida a próxima surge pequenina no centro e cresce até o tamanho normal, em cerca de 300 milissegundos. Uma camada opcional por cima recebe título e botão, que descem suavemente até o lugar quando todas as imagens terminam de carregar. Na demo, um degradê escuro na base ajuda na leitura do texto.
Você pode estar procurando isto se pediu algo assim
- fotos grandes trocando sozinhas no topo do site
- slideshow de imagens em tela cheia para a página inicial
- banner de fotos que passa quando deslizo o dedo no celular
- galeria de imagens que troca com as setas do teclado
- topo do site de imobiliária com as fotos dos imóveis passando
- imagem de fundo que muda de tempos em tempos com título por cima
- carrossel de fotos de tela inteira para site de eventos
Também chamado de
- slideshow em tela cheia
- fullscreen image slider
- hero slider
- carrossel de imagens
- banner rotativo
- image carousel
- slider de fotos
Quando usar
- Hero de imobiliária mostrando fachadas e ambientes dos imóveis
- Páginas de turismo, hotéis e pousadas com fotos do destino
- Sites de eventos e casamentos que vivem de imagem
- Abertura de portfólio de fotógrafo ou de arquiteto
Quando evitar
- Quando a mensagem principal depende de uma única imagem que todo mundo precisa ver
- Páginas que precisam carregar rápido em rede móvel, já que todas as fotos são baixadas antes de o título aparecer
Como pedir para a sua IA
Crie um slideshow de fotos em tela cheia no topo da página inicial: uma imagem por vez, a atual sai deslizando e a próxima cresce do centro, troca automática a cada 5 segundos, setas do teclado e gesto de deslizar no celular, com troca sem animação para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Fotograma
Fotograma funciona no celular?
Sim. Fotograma troca de foto com o gesto de deslizar o dedo e pausa o intervalo automático enquanto a pessoa desliza. Como o componente baixa todas as fotos antes de mostrar a primeira e o título, use imagens comprimidas no tamanho certo e compare o LCP antes e depois, como pede o prompt do THM Componentes.
Dá para navegar em Fotograma pelo teclado?
Sim. Fotograma recebe foco pelo Tab, mostra um contorno fino de foco e responde às quatro setas: cima e esquerda voltam, baixo e direita avançam. As fotos não ganham texto alternativo por padrão, então vale pedir à IA que inclua uma descrição para cada imagem.
Fotograma respeita quem prefere menos movimento?
O componente original sempre anima a troca e não lê a preferência do sistema. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento, o que em Fotograma pode significar trocar as fotos sem deslizar nem crescer e só quando a pessoa pedir.
