M25 — Slider

Módulo de destaque que apresenta uma sequência de imagens (ou vídeos) em grande formato, acompanhadas de uma secção lateral com a pré-visualização do próximo conteúdo, uma legenda, uma barra de progresso e botões para avançar ou recuar. É ideal para contar uma história visual do hotel — passagens pelos espaços, momentos de experiência ou coleções fotográficas.

Campo	Valor
Módulo	M25 — Slider
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T430
Criada	2026-04-21
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px) — Savoy Palace

Mobile (375px) — Savoy Palace

Abrir screenshot mobile (375px) em nova janela →</a>

Variantes por tema

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O Slider é um módulo visual que combina uma área de texto no topo (com uma pequena etiqueta, um título e uma descrição) com um carrossel de grandes imagens ou vídeos logo abaixo. A imagem ativa ocupa quase toda a largura do ecrã; ao lado, numa faixa estreita, o visitante vê uma pré-visualização da próxima imagem, o contador (por exemplo “1/3”), uma legenda com um pequeno botão, uma barra de progresso e dois botões redondos para avançar ou recuar.

O módulo suporta tanto imagens como vídeos — nos slides de vídeo aparece um botão de reprodução sobre a imagem, e ao clicar nele o vídeo começa a ser reproduzido no próprio lugar.

Por baixo do carrossel pode aparecer um botão principal que leva o visitante a uma página relacionada (por exemplo, “Explorar o hotel”, “Ver todas as experiências”).

Este módulo é útil em páginas de apresentação do hotel, páginas de espaços (quartos, spa, restaurantes), páginas de experiências ou sempre que se pretende destacar uma coleção de imagens com protagonismo.

Variantes

Variante 1 — Modo claro (fundo branco)

Como visitante num computador, quero ver as imagens em grande formato sobre um fundo limpo para poder apreciá-las sem distrações.

Elementos visíveis:

Pequena etiqueta em maiúsculas acima do título
Título grande à esquerda (pode ter palavras a negrito)
Descrição curta em linha, ao lado ou por baixo do título
Imagem principal grande, à esquerda, ocupando a maior parte da largura
Faixa lateral estreita à direita com: miniatura da próxima imagem, contador (ex: “1/3”), legenda, pequeno botão sublinhado opcional, barra de progresso fina e dois botões redondos (anterior e seguinte)
Botão principal opcional, centrado, por baixo do carrossel

Critérios de Aceitação:

O fundo do módulo é branco (sem cor adicional)
O título e a descrição aparecem no topo do módulo
A imagem ativa aparece grande à esquerda
A faixa lateral à direita mostra a miniatura da próxima imagem
O contador (ex: “1/3”) é visível ao lado da miniatura
Os botões redondos de avançar/recuar aparecem no canto inferior direito
A barra de progresso avança à medida que o visitante muda de slide
O botão principal no fundo (se existir) leva o visitante à página indicada

Variante 2 — Modo médio (fundo com cor do hotel)

Como editor de conteúdo, quero poder apresentar o mesmo módulo com um fundo colorido do tema do hotel, para destacar mais esta secção dentro da página.

Elementos visíveis:

Todos os elementos da Variante 1
O fundo do módulo inteiro passa a ter uma cor subtil do hotel (ex: bege no Savoy Palace, verde suave no Saccharum, azul claro no Hotel Next)
As cores do texto, setas e barra de progresso continuam a ser legíveis sobre esse fundo colorido

Critérios de Aceitação:

O fundo do módulo inteiro tem a cor secundária do tema do hotel
O título, a descrição e todos os textos permanecem legíveis
A imagem e a faixa lateral mantêm-se visualmente bem integradas com o novo fundo
A estrutura geral (imagem à esquerda, faixa à direita, botão no fundo) é idêntica à Variante 1

Variante 3 — Slide com vídeo

Como visitante, quero poder reproduzir um vídeo diretamente dentro do carrossel sem sair da página.

Elementos visíveis:

Os mesmos elementos das Variantes 1 ou 2
No slide de vídeo, aparece um botão redondo de reprodução (triângulo) sobre a imagem
Quando o visitante clica nesse botão, a imagem é substituída pelo vídeo com os controlos normais (pausa, volume, tempo)

Critérios de Aceitação:

Os slides de vídeo apresentam um botão de reprodução sobre a imagem
Ao clicar no botão, o vídeo começa a ser reproduzido no mesmo lugar da imagem
Os controlos do vídeo (pausa, volume) ficam visíveis durante a reprodução
Ao mudar de slide, qualquer vídeo em reprodução para automaticamente
Slides que contenham apenas imagens não apresentam botão de reprodução

Variante 4 — Mobile (imagem centrada com espreitadela)

Como visitante num telemóvel, quero ver a imagem principal a ocupar quase todo o ecrã e perceber que há mais slides para ver à minha direita.

Abrir screenshot mobile (375px) em nova janela →</a>

Elementos visíveis:

Título, etiqueta e descrição no topo, agora empilhados verticalmente
Imagem principal centrada, ocupando a maior parte da largura
Imagens adjacentes (anterior e seguinte) aparecem parcialmente visíveis dos lados, como uma “espreitadela”
Por baixo da imagem: contador (ex: “1/3”), legenda, pequeno botão sublinhado, barra de progresso e dois botões redondos (anterior e seguinte)
Botão principal no fundo (se existir)

Critérios de Aceitação:

A imagem principal fica centrada e domina o ecrã
As imagens adjacentes aparecem parcialmente visíveis à esquerda e à direita (para indicar que há mais)
O contador, legenda, barra de progresso e botões de navegação aparecem por baixo da imagem
Deslizar com o dedo para o lado avança ou recua os slides
O módulo ocupa toda a largura do ecrã sem criar scroll horizontal

Variante 5 — Sem secção de texto no topo

Como editor de conteúdo, quero poder usar apenas o carrossel de imagens, sem etiqueta, título nem descrição, quando o contexto da página já introduz o conteúdo.

Elementos visíveis:

O bloco de texto do topo (etiqueta, título, descrição) não aparece
O carrossel aparece logo no topo do módulo
Todos os restantes elementos (imagem, faixa lateral, botão no fundo) continuam iguais

Critérios de Aceitação:

Quando os três campos de texto do topo (etiqueta, título, descrição) estão vazios, o bloco de texto não aparece
O carrossel ocupa o espaço natural, sem deixar áreas vazias no topo
A experiência de navegação entre slides mantém-se igual

Variante 6 — Sem botão principal no fundo

Como editor de conteúdo, quero poder usar o módulo apenas como apresentação visual, sem um botão de ação no fundo.

Elementos visíveis:

Todos os elementos do topo e do carrossel continuam iguais
O botão principal por baixo do carrossel não aparece

Critérios de Aceitação:

Quando o botão principal não está preenchido no backoffice, nada aparece no fundo do módulo
O espaço do botão não é deixado vazio — o módulo termina naturalmente no carrossel

Variante 7 — Um único slide

Como editor de conteúdo, quero poder usar o módulo mesmo com apenas uma imagem, para destacar uma única foto ou vídeo.

Elementos visíveis:

O título, descrição e imagem aparecem normalmente
A miniatura da próxima imagem não aparece (não há próxima)
Os botões redondos de avançar/recuar aparecem desativados ou ocultos
A barra de progresso fica totalmente preenchida (indicando que não há onde avançar)
O contador mostra “1/1”

Critérios de Aceitação:

Com um único slide, os botões de avançar/recuar não têm efeito (ou ficam desativados)
A miniatura do próximo slide não aparece
O contador mostra “1/1”
A barra de progresso aparece totalmente preenchida

Variante 8 — Adaptação por tema do hotel

Como visitante de qualquer hotel Savoy Signature, quero que o módulo reflita visualmente a identidade desse hotel para reforçar a coerência de marca.

Elementos que mudam entre temas:

Cor do título, etiqueta, contador, setas, barra de progresso e botão principal
Cor de fundo (no modo médio)
Tipografia dos títulos e do corpo de texto
Forma dos botões redondos de navegação (alguns temas usam botões em forma de pílula, outros em forma de círculo)
Raio dos cantos das imagens (quadrado, ligeiramente arredondado ou mais arredondado, consoante o hotel)

Critérios de Aceitação:

Todas as cores (texto, setas, progresso, botões) seguem o tema do hotel atual
A tipografia dos títulos e do corpo de texto corresponde ao tema
A forma dos botões de navegação é específica do tema
A estrutura e o comportamento mantêm-se iguais entre todos os temas

Interações do Utilizador

Este é um módulo interativo. O visitante pode percorrer os slides clicando em botões, deslizando com o dedo no telemóvel ou usando o teclado.

Interação	Descrição
Clicar no botão redondo de seta direita	O carrossel avança para o próximo slide. A imagem muda com uma transição suave de esbatido (fade) no computador, ou deslizamento no telemóvel.
Clicar no botão redondo de seta esquerda	O carrossel recua para o slide anterior.
Chegar ao último slide e clicar em seguinte	O carrossel volta ao primeiro slide (navegação circular).
Deslizar com o dedo para o lado (telemóvel)	Avança ou recua os slides.
Clicar no botão de reprodução de um slide de vídeo	A imagem é substituída pelo vídeo em reprodução, com controlos visíveis (pausa, volume).
Mudar de slide enquanto um vídeo está a tocar	O vídeo para automaticamente e volta à imagem estática.
Clicar no pequeno botão sublinhado da legenda	Navega para a página indicada (por exemplo, página detalhada do espaço mostrado).
Clicar no botão principal por baixo do carrossel	Navega para a página indicada.
Usar as setas do teclado (Esquerda/Direita)	Avança ou recua os slides quando o carrossel está selecionado.
Carregar Tab	Permite navegar por todos os elementos interativos: botões de seta, botões da legenda, botão de reprodução de vídeo e botão principal.

Elementos

Conteúdos geridos no backoffice para este módulo:

Elemento	Tipo	Obrigatório	Descrição
Etiqueta	Título	Não	Texto curto em maiúsculas apresentado por cima do título principal. O editor escolhe o nível de cabeçalho.
Título principal	Título	Não	Texto em destaque no topo do módulo (suporta negrito). O editor escolhe o nível de cabeçalho.
Descrição	Texto	Não	Pequeno texto explicativo apresentado junto ao título.
Slides	Lista	Sim	Lista de imagens ou vídeos a apresentar no carrossel. Pelo menos um slide é necessário.
Botão principal	Botão	Não	Botão apresentado por baixo do carrossel, com texto e ligação para uma página.

Cada slide contém:

Elemento	Tipo	Obrigatório	Descrição
Tipo de conteúdo	Opção	Sim	Indica se o slide é uma imagem ou um vídeo.
Imagem (computador)	Imagem	Sim	Imagem principal para ecrãs grandes.
Imagem (telemóvel)	Imagem	Sim	Imagem adaptada para ecrãs pequenos.
Descrição da imagem	Texto	Sim	Descrição para leitores de ecrã (ex: “Terraço do hotel ao pôr do sol”).
Ficheiro de vídeo	Vídeo	Não	Ficheiro de vídeo a reproduzir. Obrigatório apenas se o tipo de conteúdo for “vídeo”.
Legenda	Texto	Não	Texto curto apresentado na faixa lateral (ex: “O terraço panorâmico, com vista sobre a baía”).
Botão da legenda	Botão	Não	Pequeno botão sublinhado na legenda, com texto e ligação (ex: “Descobrir suites”).

Nota: A etiqueta, o título e a descrição do topo são opcionais e podem ser usados em qualquer combinação (pode haver só título, só etiqueta, os três, ou nenhum). A lista de slides é o único elemento obrigatório para o módulo fazer sentido. Em cada slide, a imagem é obrigatória — o vídeo só é necessário quando o tipo de conteúdo é “vídeo”. O módulo adapta-se automaticamente à ausência de campos opcionais — os espaços ajustam-se sem deixar áreas vazias.

Opções de Configuração

Opções disponíveis no backoffice para personalizar o comportamento e aspeto do módulo:

Opção	Valores possíveis	Valor padrão	Descrição
Ativar/Desativar	Ativo / Inativo	Ativo	Permite esconder o módulo sem o apagar.
Modo visual	Claro / Médio	Claro	Controla o fundo do módulo. “Claro” = fundo branco. “Médio” = fundo com cor secundária do tema do hotel.

O restante aspeto visual (cores do texto, setas, barra de progresso, tipografia, forma dos botões de navegação e raio dos cantos das imagens) é controlado automaticamente pelo tema do hotel e não precisa de configuração no módulo.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Disposição geral	Imagem grande à esquerda + faixa lateral estreita à direita	Imagem centrada com espreitadela dos slides adjacentes; faixa lateral passa para baixo da imagem
Título e descrição	Título alinhado à esquerda, descrição logo a seguir	Título e descrição empilhados verticalmente, no topo
Imagem principal	Ocupa cerca de 83% da largura do conteúdo	Ocupa a maior parte da largura do ecrã (com espreitadela dos slides vizinhos)
Miniatura do próximo slide	Visível na faixa lateral à direita	Não aparece como miniatura separada (é substituída pela espreitadela ao lado da imagem principal)
Contador (ex: 1/3)	Na faixa lateral, por cima da legenda	Por baixo da imagem, no bloco de informação
Legenda	Na faixa lateral, texto num tamanho legível	Por baixo da imagem, num bloco dedicado
Barra de progresso	Fina, na faixa lateral	Mais visível, por baixo da legenda
Botões de avançar/recuar	Redondos, no canto inferior direito da faixa lateral	Redondos, visíveis dos dois lados, por baixo da barra de progresso
Botão principal	Centrado por baixo do carrossel	Centrado por baixo do carrossel

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com o primeiro slide visível. O contador mostra “1/{total}”. A barra de progresso está no início.
Ao passar o rato num botão redondo	O botão ganha um pequeno destaque visual (muda de cor ou de fundo) para indicar que é clicável.
Ao passar o rato na miniatura do próximo slide	Pode mudar ligeiramente para indicar que é um preview (sem ser clicável diretamente).
Ao passar o rato no botão da legenda	O texto do botão muda de cor ou mostra um sublinhado mais visível.
Transição entre slides (computador)	A imagem atual esbate-se e a próxima aparece suavemente (efeito de fade).
Transição entre slides (telemóvel)	Os slides deslizam para o lado com um movimento suave.
Vídeo em reprodução	A imagem é substituída pelo vídeo, com controlos do browser visíveis.
Mudar de slide com vídeo a tocar	O vídeo para automaticamente e o próximo slide aparece como imagem estática.
Único slide	Os botões de avançar/recuar não têm efeito. A barra de progresso aparece totalmente preenchida.
Sem legenda num slide	O espaço da legenda não aparece vazio — os restantes elementos (contador, barra, setas) ajustam-se.
Sem botão na legenda	O botão sublinhado da legenda simplesmente não aparece.
Campos do topo vazios	O bloco de texto do topo (etiqueta, título, descrição) é omitido totalmente.
Modo sem animações (preferência do sistema)	As transições entre slides ficam instantâneas (sem movimento suave) para utilizadores que preferem menos animação.

Acessibilidade

Pode ser navegado inteiramente com o teclado: Tab para saltar entre botões e elementos interativos, Enter/Espaço para ativar, setas do teclado (Esquerda/Direita) para mudar de slide quando o carrossel está selecionado.
O carrossel é anunciado por leitores de ecrã como um “carrossel”, com indicação do slide atual (ex: “Slide 1 de 3”).
Ao mudar de slide, o contador é anunciado automaticamente por leitores de ecrã.
Todas as imagens têm uma descrição alternativa legível por leitores de ecrã (campo “Descrição da imagem”).
Os botões de avançar e recuar têm texto legível por leitores de ecrã (“Slide anterior”, “Slide seguinte”), em português ou inglês consoante o idioma do site, mesmo quando aparecem apenas como ícones.
O botão de reprodução de vídeo tem texto legível por leitores de ecrã (“Reproduzir vídeo”).
A barra de progresso é anunciada por leitores de ecrã, indicando a percentagem atual.
Todos os elementos interativos têm indicação visual clara quando estão selecionados pelo teclado.
Para utilizadores que preferem menos animação (configuração no sistema operativo), as transições suaves entre slides são desativadas automaticamente.
O contraste entre texto e fundo cumpre os requisitos de acessibilidade visual em ambos os modos (claro e médio) e em todos os temas de hotel.

Temas

O módulo adapta-se visualmente a cada hotel: cores de fundo (no modo médio), cores do texto, das setas e da barra de progresso, tipografia dos títulos e do corpo de texto, forma dos botões de navegação e raio dos cantos das imagens seguem a identidade visual de cada hotel.

Os 8 hotéis suportados:

Savoy Signature
Savoy Palace
Royal Savoy
Saccharum
The Reserve
Calheta Beach
Gardens
Hotel Next

Diferenças visíveis entre temas (exemplos):

Savoy Palace — tons neutros e dourados, fundo bege no modo médio, botões redondos clássicos
Saccharum — verde suave no modo médio, tipografia mais moderna
Calheta Beach — paleta inspirada no mar, fundo claro adequado à identidade costeira
Hotel Next — paleta contemporânea (azul vivo no modo médio), botões em forma de pílula, cantos das imagens mais arredondados
Savoy Signature — paleta neutra institucional

A estrutura (posição da imagem, faixa lateral, comportamento do carrossel) mantém-se igual em todos os temas para garantir uma experiência consistente.

Changelog

Data	Estado	Descrição
2026-04-21	Rascunho	Versão inicial criada a partir do Figma
2026-04-21	Publicada	Publicada no Docmost (nova página)