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 e texto. Ele possui os slider dots, que informa quantos elementos possui e qual está sendo exibido no momento.
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.
Nome | Propriedade | Função |
|---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
| Intervalo de transição | slide-interval | Define o tempo, em milissegundos, para alternar para o próximo slide. |
| Início automático | auto-play | Informe true para iniciar automaticamente a transição ou false para que isso não ocorra. |
| Reprodução contínua? | does-continue | Informe true para que a transição fique em loop ou false para finalizar a transição no último slide. |
| Itens | - | Permite adicionar, ordenar, configurar e excluir os sliders do componente. |
Exibir | ng-show | Propriedade AngularJS usada para exibir ou ocultar o componente. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Classes CSS | class | Adiciona classes CSS já criadas. |
Acesse a documentação do subcomponente Conteúdo H2 para maiores informações.
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 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.
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.
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?.
Figura 2.3 - Acesso as propriedades de reprodução do Carrossel
Nome em inglês
Carousel
Nesta página
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Imagem no Editor Visual