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

Aba de Estilos

Na tabela abaixo

estão descritos os tipos de estilos disponíveis para o componente Carrossel.

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 elemento na propriedade Itens, clique no botão + (Adicionar) 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.

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

Alterar imagem

Com o botão bola cadeado desbloqueado, selecione 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.

Use campo valor alternativo (2 da Figura 2.2) para que deficientes visuais que utilizem aplicativos de leitor de tela.

Figura 2.2 - Propriedades do subcomponente imagem

Alterar título

Para selecionar o título é necessário desbloquear o slide clicando no botão bola cadeado, depois selecione 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 esse campo.

Figura 2.3 - Alterando o título

Alterar subtítulo

Para selecionar o subtítulo é necessário desbloquear o slide clicando no botão bola cadeado, depois selecione o 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.

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

Figura 2.5 - Excluindo os slider dots