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.

Image Modified

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:

Propriedades do Slider dots

Na tabela abaixo, estão descritos as propriedades do subcomponente Slider dots.

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 Clique no símbolo de Cadeado na barra de opções do componente Carrossel para desbloquear os subcomponentes (1 da figura 2), selecione na área indicada (2) 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 "+" (Adicionar3) 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.4).

Image Modified

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 componente selecionado para exibir suas propriedades no menu lateral . (1 da figura 2.1). Use a propriedade origem Imagem (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.

Image Modified

Figura 2.2 1 - Propriedades do subcomponente imagem

Alterar título e subtí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.

Image Removed

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.

Image Removed

Figura 2.4 - Selecionando o subtítulo

ou o subtítulo clique em qualquer área do componente Carrossel (1 da figura 2.2), altere o texto padrão usando a propriedade Título ou Subtítulo (2), e o texto do subtítulo na propriedade Subtítulo . É possível internacionalizar esse campo.

Image Added

Figura 2.2 - Alterando o título

Slider dots 

Âncora
slider slider

Os ícones do slider dots servem de indicação, mostrando qual é o slide em exibição no momento e a quantidade total deles, também é usado para adicionar novos itens no carrossel. 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)3).

Image Modified

Figura 2.5 3 - Excluindo os slider dots