Criando um background com slides em aplicações mobile com Ionic

Criando um background com slides em aplicações mobile com Ionic

Olá Galera.. como estão?

Hoje vamos construir um belo background com slides para ser usado tanto em aplicações mobile com Ionic. O conceito servirá também para outras linguagens que utilizam web e mobile que utilizam HTML e CSS.

Veja abaixo o que iremos fazer:

Bora lá?

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. Inserindo as imagens para o background

Aqui estão as imagens utilizadas para esse exemplo.

Iremos colocar as imagens no caminho src/assets/img/background

 

3. Utilizar as imagens na aplicação

Bom, depois de definido as imagens do background slide, vamos utilizá-los na aplicação.

Modificaremos o arquivo src/pages/home/home.ts

Dessa maneira, nós criamos um array (backgrounds) com 4 imagens para o nosso background.

Agora vamos utilizá-lo em nossa view e fazer a mágica acontecer, utilizando ion-slides. 

Vamos alterar o arquivo src/pages/home/home.html

Veja que utilizamos as propriedades pager=false (para não mostrar os pagers do slide), autoplay=”2000″ (definindo um atraso entre as transições (em milissegundos)), loop=”true” (para que quando chegar no último slide, este volte para o primeiro), speed=”1500″ (definindo a duração da transição dos slides (em milissegundos)) e effect=”fade”.

Para deixar mais elegante nosso background, simulamos uma tela de login, e todo o código está entre:

4. Estilizando a aplicação

Vamos deixar um pouco mais bonita e atraente a aplicação, ok?

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

Para executar no navegador, executamos o comando:

Se você carregar o aplicativo no seu navegador, você deve ter algo que se parece com isto:

 

Bom, é isso.

Espero que tenham gostado e que possa ser útil nos projetos de vocês.

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

Valeu pessoal, até mais!!

Previous Criando Componente Accordion List com Ionic 3
Next Criando estiloso SearchBar com ViewChild

About author

Junior Abranches
Junior Abranches 4 posts

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

You might also like

Veja como criar aplicação web, desktop e mobile com um único código

Share this on WhatsAppAndré Baltieri disponibiliza curso que leva AngularJS pra todo lado Esta semana nosso parceiro e amigo André Baltieri disponibilizou um curso muito interessante onde ele irá mostrar

Mobile 4 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 0 Comments

Curso Ionic em português – Aula 7 – Gerando nosso APK

Share this on WhatsAppVeja como geramos nosso apk para por o app no celular Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos realizar a

2 Comments

Leave a Reply