O componente Galeria carrossel

Esse componente não é compatível com anúncios HTML para AMP, anúncios em vídeo nem com anúncios gráficos.

O componente Galeria carrossel cria uma galeria deslizante no estilo de carrossel para várias imagens. Modifique as propriedades do componente para criar diversas experiências em 3D e vários tipos de carrossel. Você também pode usar uma Galeria carrossel em um anúncio dinâmico.

Como escolher a galeria certa

O Google Web Designer tem três componentes de galeria diferentes:

• A Galeria 360º mostra imagens de todos os lados de um objeto, permitindo que você deslize-o para frente e para trás. A Galeria 360° não exibe grupos nem elementos de navegação.
• A Galeria deslizante tem uma aparência simples e plana e permite que você movimente imagens ou grupos no sentido vertical ou horizontal.
• A Galeria carrossel é semelhante à Galeria deslizante, mas ainda oferece tridimensionalidade às imagens vizinhas, como se elas estivessem em uma tela giratória.
• A Galeria com transição oferece uma variedade de efeitos de animação quando você alterna de uma imagem para outra.

Para usar a Galeria carrossel no seu projeto, faça o seguinte:

1. Abra o painel Componentes e a pasta Galerias.

2. Arraste o componente Galeria carrossel para o cenário.

3. Na seção Propriedades do componente Galeria carrossel do painel Propriedades, escolha um nome para o componente.

4. Adicione um conjunto de imagens ou de grupos. Use grupos para exibir elementos diferentes de imagens ou para mostrar vários elementos em um único frame.

   • Para adicionar imagens à galeria, use um dos seguintes métodos:
     • Na seção do componente Galeria carrossel no painel Propriedades, clique no botão Selecionar imagens da galeria no campo Imagens. Clique no botão Escolher imagens para procurar arquivos de imagem ou arrastá-los diretamente para a caixa de diálogo.
     • Na seção de propriedades do componente Galeria carrossel do painel "Propriedades", adicione os URLs para suas imagens no campo Imagens, separados por vírgulas.
   • Para adicionar grupos à galeria:
     • Na seção de propriedades do componente Galeria carrossel do painel Propriedades, adicione uma lista de nomes de grupos ao campo Grupos, separados por vírgula.

5. Como opção, ajuste as propriedades adicionais do componente, descritas abaixo.

Para reordenar ou remover imagens da galeria:

1. Na seção de propriedades do componente Galeria carrossel no painel Propriedades, clique no botão Selecionar imagens da galeria .
2. Arraste uma imagem para a nova posição a fim de mudar a ordem ou passe o cursor sobre ela e clique no botão Excluir para remover a imagem da galeria.
3. Clique em OK.

Propriedades

Propriedade	Descrição
Nome	Define o nome da Galeria carrossel.
Imagens	Permite selecionar as imagens para uso na galeria. Pode ser vinculado a dados dinâmicos.
Grupos	É uma lista de grupos delimitados por vírgulas para serem usados na galeria. Pode ser vinculado a dados dinâmicos.
Transição	O tempo de transição entre imagens em milésimos de segundo.
Frame inicial	Indica o número da imagem que você quer exibir inicialmente.
Reprodução automática	Se esta opção for marcada, as imagens na galeria serão reproduzidas automaticamente.
Incluir navegação	Se esta opção for marcada, serão incluídos ícones de navegação para se mover na galeria.
Usar miniaturas	Quando marcada com "Incluir navegação", exibe imagens de miniaturas para navegação, em vez de ícones.
Cor do destaque	Define a cor de destaque para a imagem de navegação.
Dimensionamento	Determina como as imagens de tamanhos diferentes são exibidas em um frame de tamanho fixo: Redimensionar imagem para caber: redimensiona proporcionalmente a imagem conforme necessário para que ela caiba no frame sem ser cortada. Um preenchimento será adicionado se a proporção do frame for diferente daquela da imagem. Cortar imagem para preencher: redimensiona a imagem para que ela preencha o frame por completo, cortando-a se necessário quando a proporção do frame for diferente daquela da imagem. Nenhum: a imagem é exibida no tamanho original, centralizada no frame. Se ela for menor do que o frame, o espaço extra será preenchido com transparência. Se a imagem for maior, ela será cortada. Esticar imagem para preencher: redimensiona e estica a imagem conforme necessário para corresponder às dimensões do frame sem cortá-la.

Propriedades avançadas

Para exibir as propriedades avançadas, clique no ícone de expandir ao lado de Propriedades avançadas no painel de propriedades do componente.

Largura do frame	A largura (em pixels) do frame da imagem na galeria.
Altura do frame	A altura (em pixels) do frame da imagem na galeria.
Rotação do vizinho	A quantidade de rotações aplicadas aos frames vizinhos.
Separação do vizinho	A quantidade de separações entre os frames.
Equidistância vertical do componente vizinho	A altura do frame vizinho.
Escala do vizinho	É a escala comparativa da imagem vizinha.
URLs de saída	É uma lista de URLs, separados por vírgulas, que corresponde a cada frame na galeria. Pode ser vinculado a dados dinâmicos.
Exibir reflexo (WebKit)	Quando esta opção é marcada, um reflexo da imagem é exibido. O reflexo é compatível somente com navegadores WebKit.
Pausar mídia ao sair do frame	Quando selecionada, pausa o áudio ou o vídeo em reprodução no frame atual sempre que esse frame for alterado. Isso evita que algum conteúdo indesejado seja reproduzido em segundo plano.
Retomar mídia ao entrar no frame	Quando selecionada, inicia qualquer áudio ou vídeo pausado no frame seguinte sempre que esse frame for alterado. Isso evita que algum conteúdo indesejado seja reproduzido em segundo plano.

Eventos e ações

Eventos enviados pelo componente Galeria carrossel

É possível acionar outras ações com base nos seguintes eventos do componente Galeria carrossel:

Evento	Descrição
Primeira interação	Enviado quando o usuário interage com a galeria pela primeira vez.
Todos os frames visualizados	Enviado quando cada frame da galeria já foi exibido pelo menos uma vez.
Imagens carregadas	Enviado quando todos os frames da galeria são carregados.
Reprodução automática finalizada	Enviado quando a reprodução automática é encerrada por algum motivo.
Frame exibido	Enviado quando cada novo frame é exibido completamente.
Frame ativado	Enviado quando uma alteração de frame é iniciada.
Frame reproduzido automaticamente	Enviado quando um frame é ativado para reprodução automática.
Toque do frame	Enviado quando o frame recebe um clique.
Extremidade esquerda	Enviado quando a galeria atinge a extremidade esquerda depois de ser deslizada.
Extremidade direita	Enviado quando a galeria atinge a extremidade direita depois de ser deslizada.
Rastrear início	Enviado quando a ação de arrastar com o mouse ou por toque é iniciada.
Rastreamento	O componente registra os dados de local X e Y associados à ação de arrastar com o mouse ou por toque.
Término da faixa	Enviado quando a ação de arrastar com o mouse ou por toque é interrompida.

Para selecionar um desses eventos na caixa de diálogo Evento, defina o componente Galeria carrossel como o destino.

Ações realizadas pelo componente Galeria carrossel

As seguintes ações do componente Galeria carrossel podem ser acionadas em resposta a outros eventos:

Ação	Opções de configuração
Ir para o frame	Índice Animar: "none" ou "slide"
Ir adiante	Animar: "none" ou "slide"
Voltar	Animar: "none" ou "slide"
Alternar uma vez	Tempo da rotação: tempo em milésimos de segundos Direção: "forwards" ou "backwards"
Interromper a rotação	none ("nenhum")

Quando você selecionar uma dessas ações na caixa de diálogo Evento, defina o componente Galeria carrossel como o destinatário.

Saiba como configurar eventos.

Visualizar

No cenário, a Galeria carrossel exibe somente o frame inicial para dar uma ideia de como o componente será exibido. Para ver o componente completamente renderizado em ação, visualize o documento no navegador que você preferir clicando no botão Visualizar no canto superior direito.