Função

Carrossel é um componente que tem a mesma funcionalidade de um slideshow, alternando entre seus itens de tempo em tempo em um loop. O Carrossel carrossel do mobile permite alterar seu tema, texto e textoimagem. Ele possui os  slider dots, que informa quantos elementos possui e qual está sendo exibido no momento.

Image RemovedImage Added

Figura 1. 1 - Exemplo do componente rodando no Aplicativo

Principais propriedades

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

Principais propriedades do componente Item do carrossel

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

Acesse a documentação do subcomponente Conteúdo H2 para maiores informações.

Subtítulo para maiores informações sobre a propriedade Subtítulo.

Tema do slider

Essa propriedade irá exibir 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.

As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:

1. Alteração do tema do projeto (menor prioridade);
2. Adição da Skin do projeto através do campo "Skin do Tema Web" na janela de Configurações do Projeto.
3. Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).

Configuração 

Acessando o componente 

Devido aos vários componentes que o compõem, a navegação pelo componente Carrossel em design time pode parecer um pouco confusa, porém, veremos aqui alguns passos para tornar essa navegação mais simples. Existem duas formas de fazer isso:

1. A primeira é através do botão de Hierarquia (destaque 1 da figura 2), perceba que essa área exibe todos os componentes presentes na view, sendo possível acessar tanto o Carrossel como os seus subitens (destaque "a" da figura 2).
2. A segunda forma é utilizando a árvore do DOM (destaque 2 da figura 2), na figura abaixo o id div#crn-slider-917555 identifica o Carrossel, no entanto, ele só será visível enquanto o Carrossel ou seus subitens estiverem selecionados, por conta disso, recomendamos sempre utilizar o botão de hierarquia, caso deseje voltar às propriedades gerais do Carrossel.

Image Added

Figura 2 - Navegando entre os subelementos do componente Carrossel

Adição e remoção de slides

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 seu tema e texto.

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 (2 da figura 2.1) e dê um segundo clique sobre a área do componente para ter acesso as propriedades desse slide.

Image Removed

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

Alterar texto

Para modificar o texto dos slides, selecione um dos elementos na propriedade Itens e em seguida clique o subcomponente H2 conteúdo no centro do componente Carrossel. Altere o texto padrão do título usando a propriedade conteúdo. É possível internacionalizar esse campo.

Acesse a documentação do subcomponente Conteúdo H2 para maiores informações.

Image Removed

Figura 2.2 - Alterando o título do slide

Propriedades de reprodução

Selecione o componente visual na área de edição e certifique-se que o botão bola cadeado está bloqueado (item 1 da figura 2.3), dessa forma será possível visualizar as propriedades: Intervalo de transição, Início automático e Reprodução contínua?.

Image Removed

podemos Adicionar (destaque 1 da figura 2.1) ou Remover (ícone lixeira, destaque 2) slides. 

Image Added

Figura 2.1 - Adicionar e remover um item do carrossel

Acesso às propriedades do slide

É possível acessar as propriedades de cada slide clicando sobre o item desejado na propriedade Itens. Porém, apesar da propriedade Itens do carrossel exibir 3 slides inicialmente, apenas o código HTML do Slide 1 está contido no componente. Assim, para acessarmos pela primeira vez as propriedades de qualquer slide que não seja o Slide 1, será necessário clicar sobre o slide desejado (item da propriedade Itens) duas vezes: o primeiro clique irá carregar o código HTML do slide selecionado (destaque 1 da figura 2.2) e o segundo clique irá acessar as propriedades do código HTML recém carregado (figura 2.3).

Image Added

Figura 2.2 - Acesso às propriedades dos itens do carrossel

Alterar imagem e subtítulo

Para modificar a imagem dos slides, selecione um dos Itens do Carrossel na propriedade Itens (figura 2.2) ou através do botão de Hierarquia (destaque 1 da figura 2.3), em seguida acesse as propriedades (destaque 2 da figura 2.3). Use a propriedade Imagem (destaque 3 da figura 2.3) para adicionar ou alterar a imagem do slide, clique no botão "..." para selecionar uma imagem dentro do projeto ou insira a URL de uma imagem da internet. Logo abaixo dessa propriedade é possível alterar o Subtítulo de cada item do carrossel (destaque 4 da figura 2.3) este campo permite internacionalização.

Image Added

Figura 2.3 - Adicionando imagem e subtítuloFigura 2.3 - Acesso as propriedades de reprodução do Carrossel