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 do mobile permite alterar seu tema, texto e imagem. Ele possui slider dots, que informa quantos elementos possui e qual está sendo exibido no momento.

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

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 podemos Adicionar (destaque 1 da figura 2.1) ou Remover (ícone lixeira, destaque 2) slides. 

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

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.

Figura 2.3 - Adicionando imagem e subtítulo