[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 10 posts

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

You might also like

Mobile 0 Comments

Implementando Push Notification no Xamarin Forms

Share this on WhatsAppVeja como implementar Push Notification no Xamarin Forms Fala pessoal beleza? Bom espero que sim! Hoje venho trazer um vídeo para vocês de como implementar o recurso

Mobile 0 Comments

Como criar animações em páginas web e aplicativos híbridos

Share this on WhatsAppAprenda criar animações em páginas web e aplicativos híbridos como ionic e phonegap Fala galera beleza? Bom espero que sim, hoje um amigo meu me perguntou como

Mobile 1Comments

Universal Apps – Compartilhando código entre o Windows e Windows Phone

Share this on WhatsAppAprenda compartilhar o código de sua aplicação na Universal Apps Ao iniciarmos o desenvolvimento de um novo aplicativo usando a estrutura do Universal Apps, percebemos que em

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply