[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!