O componente amp-carousel

Observação: esse componente só pode ser usado em anúncios HTML para AMP.

O componente amp-carousel cria um carrossel para exibir várias imagens. É possível personalizar a aparência e o comportamento do carrossel modificando as propriedades do elemento.

Um exemplo do componente amp-carousel

Para usar o componente amp-carousel em um projeto:

1. Abra o painel Componentes e a pasta Galerias.

2. Arraste o componente amp-carousel para o cenário.

3. No painel Propriedades, localize a seção de propriedades do amp-carousel e insira um nome para o componente no campo Nome.

4. No campo Imagens, adicione imagens à galeria usando um dos seguintes métodos:

   • Clique no botão Selecionar imagens da galeria . Clique no botão Escolher imagens para procurar arquivos de imagem ou arrastá-los diretamente para a caixa de diálogo.
   • Insira os URLs das imagens, separados por vírgula.

5. Como opção, ajuste as propriedades do componente conforme descrito abaixo.

Visualização de código

Na Visualização de código, o componente amp-carousel lista todas as imagens da propriedade Imagens em um atributo especial do Google Web Designer, images, em vez de incluí-las como elementos filhos. Em outros casos, o código-fonte do componente deve seguir as especificações oficiais. O arquivo é publicado totalmente de acordo com as especificações.

Para reorganizar ou remover imagens do carrossel:

1. Na seção de propriedades do componente amp-carousel do painel Propriedades, clique no botão Selecionar imagens da galeria . Uma caixa de diálogo será aberta com uma lista de imagens no carrossel.
2. Arraste uma imagem para a nova posição a fim de reordená-la ou passe o cursor sobre ela e clique no ícone Excluir imagem para remover a imagem do carrossel.
3. Clique em OK.

Propriedades

Altere a aparência e o comportamento do componente amp-carousel no painel "Propriedades".

Propriedade	Descrição
Nome	É o nome do amp-carousel.
Imagens	São os URLs das imagens exibidas no carrossel.
Tipo	É o tipo de exibição: carrossel: todos os slides são exibidos em uma faixa contínua com rolagem horizontal. slides: um único slide é exibido de cada vez.
Reprodução automática	Essa opção só se aplica quando o tipo é definido como slides. Marque essa caixa se quiser que o carrossel avance automaticamente para a próxima imagem sem interação do usuário. São necessários pelo menos três slides para usar a reprodução automática.
Atraso	Essa opção só se aplica quando o tipo é definido como slides e a reprodução automática está ativada. É o intervalo em milissegundos antes da exibição do próximo slide. O atraso padrão é de 5.000 milissegundos ou 5 segundos.
Exibir controles	Marque essa caixa se quiser exibir setas para a esquerda e para a direita, que permitem navegar entre os itens do carrossel em dispositivos móveis. Em computadores, as setas são sempre exibidas nos carrosséis com vários itens.
Loop	Essa opção só se aplica quando o tipo é definido como slides. Marque essa caixa para que seja possível avançar além do primeiro ou do último slide. Com isso, o carrossel voltará para a outra extremidade. São necessários pelo menos três slides para usar o efeito de loop.

Eventos e ações

Eventos enviados pelo componente amp-carousel

Você pode acionar outras ações com base nos seguintes eventos do componente amp-carousel:

Evento	Descrição
Alteração no slide	É enviado ao trocar o slide em exibição.

Para selecionar um desses itens na caixa de diálogo Evento, defina o componente amp-carousel como o destino.

Ações realizadas pelo componente amp-carousel

As seguintes ações do componente amp-carousel podem ser acionadas em resposta a outros eventos:

Ação	Opções de configuração
Ir para o slide	Índice: é o número do slide que será acessado, com 0 indicando o primeiro da lista.

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

Saiba como configurar eventos.

Visualização

Não é possível visualizar esse componente na interface do Google Web Designer. Para ver como ele fica em ação, clique no botão Visualizar no canto superior direito e visualize o documento no navegador que você preferir.