O componente Galeria deslizante

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 deslizante permite criar uma galeria simples que os usuários podem deslizar para frente e para trás a fim de exibir um conjunto de diferentes imagens ou grupos. Você pode usar uma Galeria deslizante 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.

Como usar a Galeria deslizante:

  1. Abra o painel Componentes e a pasta Galerias.

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

  3. Na seção de propriedades do componente Galeria deslizante 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, use um dos seguintes métodos:
      • Na seção de propriedades do componente Galeria deslizante no painel Propriedades, adicione URLs para suas imagens no campo Imagens, separados por vírgulas.

      • Na seção de propriedades do componente Galeria deslizante no painel Propriedades, clique no botão Selecionar imagens da galeria . Clique no botão Escolher arquivos para procurar arquivos de imagem ou arrastá-los diretamente para a caixa de diálogo.

    • Para adicionar grupos à galeria:

      • Na seção de propriedades do componente Galeria deslizante no painel Propriedades, adicione uma lista de nomes de grupos no campo Grupos, separados por vírgula.
  5. Como opção, ajuste as propriedades do componente, descritas abaixo.

Uso de grupos na Galeria deslizante

A Galeria deslizante pode exibir conjuntos de imagens ou de grupos. Com os grupos, você pode usar recursos que não são imagens (como vídeos) ou vários recursos em um único frame da galeria (como imagens com legendas).

Quando você estiver usando vídeos ou outros recursos interativos, selecione Desativar o deslize no painel "Propriedades". Isso permite que o usuário interaja com os controles de vídeo. Você pode usar o componente Navegação da galeria para permitir que o usuário navegue entre os frames da galeria.

Para criar uma galeria que mostre uma combinação de imagens e grupos, primeiro é necessário converter as imagens que você quer usar em grupos.

Além disso, é possível exibir vários elementos dinâmicos na galeria usando grupos.

Para reordenar ou remover imagens na galeria:

  1. Na seção de propriedades do componente Galeria deslizante 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 deslizante.
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.
Exibir frames O número de frames que são exibidos na galeria por vez.
Deslizar frames O número de frames que avançam a cada movimento.
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 a opção "Incluir navegação" está marcada, exibe imagens de miniaturas para navegação no lugar de ícones.
Cor de 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.
Direção Determina se a imagem move-se horizontal ou verticalmente na galeria.

Propriedades avançadas

Para exibir as propriedades avançadas, clique no ícone de expansão de Propriedades avançadas no painel de propriedades do componente.

Propriedade avançada Descrição
Equidistância do frame A distância entre as imagens.
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.
Duração da reprodução automática A duração (em milésimos de segundo) de execução da galeria, do primeiro ao último frame. Esse tempo é dividido igualmente entre cada imagem, a menos que um Intervalo da etapa de reprodução automática seja escolhido.
Intervalo da etapa de reprodução automática A duração (em milésimos de segundo) da exibição de cada imagem quando a Reprodução automática é ativada. As imagens são reproduzidas com esta duração até que a duração total da reprodução automática seja atingida, alternando entre as imagens várias vezes se necessário.
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.
Desativar o deslize Uma caixa de seleção que permite a você desativar a navegação de deslize para a galeria. Isso permite ao usuário interagir com elementos no frame sem que a interação altere o frame acidentalmente. Quando essa opção é marcada, é possível usar a propriedade "Incluir navegação" ou o componente Navegação da galeria para alterar os frames.
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 é 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 se torna ativo.

Eventos e ações

Eventos enviados pelo componente Galeria deslizante

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

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 é exibido automaticamente durante a 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.
Colocar o mouse sobre um frame Enviado quando o mouse entra no frame.
Afastar o mouse de um frame Enviado quando o mouse sai do frame.
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 deslizante como o destino.

Ações realizadas pelo componente Galeria deslizante

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

Ação Opções de configuração
Ir para o frame
  • Número do frame
  • 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")
Ir adiante none ("nenhum")
Voltar nenhum

Ao selecionar uma dessas ações na caixa de diálogo Evento, defina o componente Galeria deslizante como o destinatário.

Saiba como configurar eventos.

Visualizar

No cenário, a Galeria deslizante 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.

Isso foi útil?

Como podemos melhorá-lo?
Pesquisa
Limpar pesquisa
Fechar pesquisa
Menu principal
4640024163117337853
true
Pesquisar na Central de Ajuda
true
true
true
true
true
5050422
false
false