Função

Carrossel é um componente que tem a mesma funcionalidade de um slideshow, alternando entre seus itens de tempo em tempo em um loop. Por padrão, o carrossel possui os componentes imagem, cabeçalho e subtítulo (H2), além do slider dots, que informa quantos elementos possui e qual está sendo exibido no momento. Todos esses subcomponentes podem ser removidos ou alterados.

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades do componente carrossel.

Para saber sobre os outros subcomponentes, clique nos links abaixo:

• Imagem,

• Cabeçalho (web),

• Subtítulo (H2)

Configuração

Seleção, adição e remoção de itens

Selecione o componente Carrossel no editor visual para exibir a propriedade Itens no menu lateral (Figura 2.1). Cada item dessa propriedade representa um slide e ao selecionar um dos itens, seu slide correspondente será exibido na tela de edição, permitindo alterar sua imagem, título e subtítulo.

Para adicionar um novo itemelemento na propriedade Itens, clique no botão + (Adicionar) na propriedade e para excluí-lo clique no ícone da lixeira (1 da Figura 2.1). Após a seleção de um dos elementos da propriedade Itens, clique no botão bola cadeado (item 2 da figura 2.1) para ter acesso aos subcomponentes desse slide.

Image Modified

Figura 2.1 - Selecionar, adicionar e remover um item do carrossel

Alterar imagem

Para selecionar o subcomponente imagem é necessário desbloquear o slide do carrossel clicando no Com o botão bola cadeado desbloqueado, depois selecione a o subcomponente imagem no slide para exibir suas propriedades no menu lateral. Use a propriedade origem (1 da Figura 2.2) para adicionar ou alterar a imagem do slide, inserindo o endereço de uma imagem, da internet ou dentro do projeto.

O texto do Use campo valor alternativo (2 da Figura 2.2) substituirá a imagem caso não seja renderizada na tela. Essa propriedade é fundamental para para que deficientes visuais que utilizem aplicativos de leitor de tela.

Acesse a documentação do componente Imagem imagem para mais informações sobre suas propriedades.

Image Modified

Figura 2.2 - Propriedades do subcomponente imagem

Alterar título

Para selecionar o subcomponente título é necessário desbloquear o slide clicando no botão bola cadeado, depois selecione título o subcomponente Cabeçalho no slide para exibir suas propriedades no menu lateral (Figura 2.3).

Altere o texto padrão do título usando a propriedade conteúdo. É possível internacionalizar seu conteúdo esse campo.

Acesse a documentação do componente título Cabeçalho para mais informações sobre suas propriedades.

Image Modified

Figura 2.3 - Alterando o título

Alterar subtítulo

Para selecionar o componente subtítulo é necessário desbloquear o slide clicando no botão bola cadeado, depois selecione o título subcomponente Subtítulo no slide para exibir suas propriedades no menu lateral (Figura 2.4).

Altere o texto padrão do subtítulo usando a propriedade conteúdo. É possível internacionalizar seu conteúdo.

Acesse a documentação do componente subtítulocomponente Subtítulo para mais informações sobre suas propriedades.

Figura 2.4 - Selecionando o subtítulo

Slider dots

Os ícones do slider dots servem de indicação, mostrando qual é o slide em exibição no momento e a quantidade total deles. Essa barra é automaticamente atualizada quando há inserção ou remoção do slide na propriedade Itens do Carrossel.

Caso não queira exibir os slider dots, desbloqueie o componente carrossel, selecione o subcomponente slider dots e clique no botão bola x (Figura 2.5).

Image Added

Figura 2.5 - Excluindo os slider dots