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 de edição permite que o autor do conteúdo crie, nomeie e solicite vários slides, além de ativar a transição automática com atraso. Usando a caixa de diálogo dedesign, 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 do 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 lançamentos dos Componentes principais, consulte as Versões dos Componentesprincipais do documento.

Exemplo de saída de componente

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

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 Componentesprincipais.

Edit Dialog

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, arrastando-se do navegador de componentes e soltando-o no componente do carrossel no editorde páginas.

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 os slides de transição automática são selecionados, 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 dedados.
    • 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 no modo Editar . Use o modo ​Pré-visualizaçãoou a Visualização como opção Publicada​para interagir com o carrossel como um leitor do conteúdo publicado.

O recurso de avanço automático não é ativado no modo Editar . Use a opção Visualização como publicada​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 rótulos de acessibilidade ARIA para o componente.

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

Select Panel

O autor do conteúdo pode usar a opção Selecionar painel na barra de ferramentas do componente para mudar 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 das transições de slides quando um autor de conteúdo adiciona o componente de 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 slides está selecionada pelo autor do conteúdo.

Allowed Components Tab

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 ao definir a política e as propriedades de um Container de layout no Editor de modelos.

Guia Estilos

O componente carrossel suporta o sistema deestilo AEM.

Nesta página