[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 0 Comments

Bomba! Xamarin agora permite desenvolver para iOS sem mesmo ter um Mac!

Share this on WhatsAppO Xamarin Live permite aos desenvolvedores implantar, testar e depurar seus aplicativos diretamente em dispositivos iOS e Android. Para isso basta instalar o aplicativo Xamarin Live Player

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

Curso Ionic em português – Aula 6 – Excluindo e pesquisando dados

Share this on WhatsAppVeja como excluír e pesquisar dados na localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como excluír dados na localStorage,

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