Componente do carrossel

O componente principal do carrossel permite que o autor do conteúdo apresente conteúdo em um carrossel navegável.

Uso

Usando o componente carrossel, o autor do conteúdo para organizar o conteúdo em um carrossel rotativo de slides.

A caixa de diálogo edit permite que o autor do conteúdo crie, nomeie e solicite vários slides, bem como ativar a transição automática com atraso. Usando a caixa de diálogo design, o autor do modelo pode definir quais componentes podem ser adicionados ao carrossel, ativar ou desativar transições automáticas e personalizar os estilos.

Versão e compatibilidade

A versão atual do componente carrossel é a v1, que foi introduzida com a versão 2.2.0 dos componentes principais em outubro de 2018 e é descrita neste documento.

A tabela a seguir detalha todas as versões compatíveis do componente, as versões AEM com as quais as versões do componente são compatíveis e os links para a documentação de versões anteriores.

Versão do componente AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 Compatível Compatível Compatível

Para obter mais informações sobre versões e versões dos Componentes principais, consulte o documento Versões dos componentes principais.

Exemplo de saída do componente

Para experimentar o componente do carrossel e ver exemplos de suas opções de configuração, bem como a saída HTML e JSON, visite a Biblioteca de componentes.

Detalhes técnicos

A documentação técnica mais recente sobre o componente do carrossel pode ser encontrada no GitHub.

Para obter mais detalhes sobre o desenvolvimento dos Componentes principais, consulte a documentação do desenvolvedor dos Componentes principais.

Editar caixa de diálogo

A caixa de diálogo de edição permite que o autor do conteúdo adicione, renomeie e reorganize slides, além de definir as configurações de transição automática.

Guia Itens

Guia Itens da caixa de diálogo de edição do componente Carrossel

Use o botão Adicionar para abrir o seletor de componentes e escolher qual componente adicionar como guia. Depois de adicionada, uma entrada é adicionada à lista, que contém as seguintes colunas:

  • Ícone - o ícone do tipo de componente da guia para facilitar a identificação na lista. Passe o mouse sobre o mouse para ver o nome completo do componente como uma dica de ferramenta.
  • Descrição - A descrição usada como o texto da guia, padronizando com o nome do componente selecionado para a guia.
  • Excluir - Toque ou clique para excluir a guia do componente de guias.
  • Reordenar - Toque ou clique e arraste para ordenar as guias.
DICA

Se o visor da página for reduzido para que a caixa de diálogo de edição se torne tela cheia, o botão Adicionar ficará oculto. Os componentes ainda podem ser adicionados ao componente do carrossel ao arrastar do navegador de componentes e soltar no componente do carrossel no editor de página.

Guia Propriedades

Guia Propriedades da caixa de diálogo Editar do componente Carrossel

Na guia Propriedades, o autor do conteúdo pode definir os slides para transição automática.

  • Transição automática de slides - quando ativo, o componente avança automaticamente para o próximo slide após um atraso especificado.
  • Atraso na transição - Quando os slides de transição automática são selecionados, esse valor é usado para definir o atraso entre transições (em milissegundos).
  • Desativar pausa automática ao passar o mouse - Quando a opção transição automática de slidesis for selecionada, a transição do carrossel pausará automaticamente sempre que o cursor passar sobre o carrossel. Selecione essa opção para que a transição não pause.
  • ID - Essa opção permite controlar o identificador exclusivo do componente no HTML e na Camada de dados.
    • Se deixado em branco, uma ID exclusiva é gerada automaticamente para você e pode ser encontrada inspecionando a página resultante.
    • Se uma ID for especificada, é responsabilidade do autor garantir que seja exclusiva.
    • A alteração da ID pode afetar o CSS, o JS e o rastreamento da camada de dados.
OBSERVAÇÃO

Os controles de avanço do slide não são ativados quando estão no modo Editar. Use a opção modo de Pré-visualização ou Visualização como Publicado para interagir com o carrossel como um leitor do conteúdo publicado.

O recurso de avanço automático não é ativado quando está no modo Editar. Use a opção Visualização como Publicado para ver o recurso de avanço automático como um leitor do conteúdo publicado.

Guia Acessibilidade

Guia Acessibilidade da caixa de diálogo de edição do componente carrossel

Na guia Acessibilidade, os valores podem ser definidos para os rótulos ARIA accessibility do componente.

  • Rótulo - Valor de um atributo de rótulo ARIA para o componente

Selecionar painel

O autor do conteúdo pode usar a opção Selecionar painel na barra de ferramentas do componente para alterar para um slide diferente para edição, bem como para reorganizar facilmente a ordem dos slides.

Selecionar ícone do painel

Depois de selecionar a opção Selecionar painel na barra de ferramentas do componente, os slides configurados são exibidos como um menu suspenso.

  • A lista é ordenada pela organização atribuída dos slides e é refletida na numeração.
  • O tipo de componente do slide é exibido primeiro, seguido pela descrição do slide com uma fonte mais leve.

Selecionar painel

  • Tocar ou clicar em uma entrada na lista suspensa alterna a visualização no editor para esse slide.
  • O slide pode ser reorganizado no local usando as alças de arrastar.

Caixa de diálogo Design

A caixa de diálogo de design permite que o autor do modelo defina quais componentes podem ser adicionados como slides ao componente do carrossel, bem como definir padrões de transição automática e quais estilos personalizados estão disponíveis para o autor do conteúdo.

Guia Propriedades

A guia Propriedades é usada para definir as configurações padrão para as transições do slide quando um autor de conteúdo adiciona o componente carrossel a uma página.

Caixa de diálogo Design do componente carrossel

  • Transição automática de slides - define se, por padrão, a opção de avançar automaticamente o carrossel para o próximo slide está ativada quando o autor do conteúdo adiciona o componente do carrossel a uma página.
  • Atraso na transição - Define o valor padrão do atraso da transição entre slides (em milissegundos) quando um autor de conteúdo adiciona o componente do carrossel a uma página.
  • Desativar pausa automática ao passar o mouse - Define se, por padrão, a opção para desativar a pausa automática do slide está ativada quando a opção transição automática de slidesis é selecionada pelo autor do conteúdo.

Guia Componentes permitidos

A guia Componentes permitidos é usada para definir quais componentes podem ser adicionados como slides ao Componente do carrossel pelo autor do conteúdo.

A guia Componentes permitidos funciona da mesma maneira que a guia do mesmo nome quando define a política e as propriedades de um Container de layout no Editor de modelos.

Guia Estilos

O componente carrossel suporta o AEM Sistema de estilo.

Camada de Dados do Cliente Adobe

O componente carrossel suporta a Camada de Dados do Cliente Adobe.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free