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.
Para usar o componente amp-carousel em um projeto:
-
Abra o painel Componentes e a pasta Galerias.
-
Arraste o componente amp-carousel para o cenário.
-
No painel Propriedades, localize a seção de propriedades do amp-carousel e insira um nome para o componente no campo Nome.
-
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.
-
Como opção, ajuste as propriedades do componente conforme descrito abaixo.
Visualização de código
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:
- 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.
- 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.
- 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:
|
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-carouselVocê 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.
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 |
|
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.