[IONIC 3] – Criando elegante Slide-Show

[IONIC 3] – Criando elegante Slide-Show

Fala pessoal, tudo bem com vocês?

Na verdade essa dica de hoje fui um pedido de uma galera que viu em um Aplicativo meu e pediu para eu postar como fazer, é uma exibição elegante e clean com Slides.

** Lembrando que a intenção desse post não é divulgar absolutamente nada e as imagens são ilustrativas.

Vamos lá, então..

1. Criar o projeto Ionic

Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:

Uma vez criado, vamos entrar no diretório do Projeto, executando:

2. Criando os dados do Slide

A primeira coisa que devemos fazer, é criar os dados para exibição do nosso slide, como esse é um exemplo retirado de um aplicativo que eu desenvolvi sobre Futebol, vou seguir a mesma característica.

Para isso, devemos alterar o arquivo src/pages/home/home.ts:

Aqui nós definimos uma variável do tipo any = [] (array) e o alimentamos com algumas informações. Estas, serão exibidas em nosso slide posteriormente.

Também temos um ViewChild que é um componente filho que pode ser acessado pelo componente pai, nesse caso o denominamos como mySlider.

E mais dois métodos (slideNext e slidePrev) que serão utilizados para passar um slide à frente, ou retroceder um slide.

3. Criando o Slide na View

Já temos os dados prontos, agora vamos alterar o arquivo src/pages/home/home.html:

Dentro do nosso Content, criamos o ion-slides que seria um container com várias seções, essas seções podem ser arrastadas ou deslizadas entre si.

Definimos algumas propriedades como:

paginationClickable > permiti o click em cada paginação do slide;

initialSlide > o index do slide inicial;

loop > caso true, ao terminar a transição dos slides, este voltará ao início;

autoplay > o atraso da transição entre os slides (em milissegundos);

speed > a duração das transições (em milissegundos).

Fizemos o relacionamento com o ViewChild denominado #mySlider.

Dentro do ion-slides, criamos o ion-slide, que é de fato cada slide do nosso container de slides (seria cada objeto criado no nosso array) pois nós definimos uma iteração chamando item (*ngFor=”let item of elenco”).

Dessa forma, cada elemento do nosso array, será demonstrado em forma de slide.

Dentro do ion-slide, colocamos alguns componentes básicos como ion-item e img (o layout fica a seu critério).

Posteriormente, criamos 2 divs, ambas com funções de transição entre os slides, passando para frente, ou retrocedendo. Pois definimos no click de cada uma, os métodos criados anteriormente ( (click)=”slideNext()” e (click)=”slidePrev()” ).

Para centralizar o texto, utilizamos a classe “”

E no arquivo src/pages/home/home.scss, definimos:

4. Executando o projeto

Feito isso, já temos uma transição bacana entre slides, para vermos o resultado, vamos digitar:

ou

ou

e deveremos ter algo semelhante à isso:

Bom, é isso galera…

Espero que a dica tenha sido útil à vocês, e que possam utilizá-la daqui pra frente..

O Código fonte para tudo isso que fizemos, encontra-se aqui.

Valeu, até mais!

Previous [IONIC 3] - Zoom em Imagem
Next [IONIC 3] - Criando Transparent Header

About author

Junior Abranches
Junior Abranches 19 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Mobile 5 Comments

Qual o melhor aplicativo híbrido ou nativo?

Share this on WhatsAppApps híbridos X nativo Pessoal, venho tentar resolver neste post uma dúvida muito comum para quem quer se aventurar na área de desenvolvimento mobile. Muitas pessoas se

Mobile 4 Comments

Validando dados com a classe ArgumentValidator no C#

Share this on WhatsAppConheça a classe ArgumentsValidator E ai pessoal beleza? Hoje gostaria de compartilhar com vocês uma classe que eu criei que nos auxilia na validação de dados. Há

Mobile 0 Comments

Flutter – Conhecendo o SDK mobile do Google

Share this on WhatsAppOlá pessoal, beleza? Há cerca de 3 anos venho me dedicando fortemente ao desenvolvimento mobile com o Ionic Framework. Porém, há 5 ou 6 meses uma nova

5 Comments

  1. hiarly
    julho 02, 16:05 Reply
    Ficou SHOW parceiro!!! Parabéns!
  2. LucianaElisa
    setembro 04, 18:37 Reply
    Eu fiz deu certinho. Que tamanho de imagem vc usou para ficar assim tela cheia?
  3. Marcus Maia
    novembro 21, 22:45 Reply
    Muito boa a dica, estou usando no meu projeto. Simples e prático!! Parabéns!

Leave a Reply