my welcome.page.ts
import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, IonSlides } from '@ionic/angular';
@Component({
selector: 'page-welcome',
templateUrl: 'welcome.page.html',
styleUrls: ['welcome.page.scss'],
})
export class WelcomePage implements OnInit {
welcomeSlides = [];
sliderConfig = {
initialSlide: 1,
speed: 400,
centeredSlides: true
};
welcomeSlidesData = [
{
title: "Ajude o meio ambiente",
description: "<b>Seja consciente</b> e descarte corretamente os seus resíduos recicláveis.",
image: "assets/img/slides/slide-1.png",
},
{
title: "Apoie a comunidade",
description: "<b>Ajude</b> os coletores, cooperativas e entidades beneficentes.",
image: "assets/img/slides/slide-2.png",
},
{
title: "É fácil e rápido",
description: "<b>Faça seu cadastro</b> e encontre coletores ou pontos de coleta mais próximos.",
image: "assets/img/slides/slide-3.png",
}
];
constructor(public navCtrl: NavController, public navParams: NavParams, public slides: IonSlides) {
}
ngOnInit() {
this.welcomeSlides = this.getSlides();
}
getSlides() {
return this.welcomeSlidesData;
}
slideNext(){
this.slides.slideNext();
}
slidePrev(){
this.slides.slidePrev();
}
ionViewDidLoad() {
console.log('ionViewDidLoad WelcomePage');
}
}
my welcome.page.html
<ion-header>
</ion-header>
<ion-content>
<ion-button>
<ion-slides #WelcomeSlides pager="true" [options]="sliderConfig" (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let slide of welcomeSlides">
<ion-toolbar>
<ion-buttons end>
<ion-button color="secondary" navPush="RequestPermissionsPage">Pular</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
<ion-button outline color="secondary" routerLink="slideNext()">
Próximo
</button>
</ion-slide>
<ion-slide>
<ion-toolbar>
<ion-buttons end>
<ion-button clear icon-end color="secondary" navPush="RequestPermissionsPage">
Continuar
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<img src="assets/img/slides/slide-4.png" class="slide-image"/>
<h2 class="slide-title">Conheça mais</h2>
<p><b>Faça seu cadastro,</b> descarte e doe para coletores, cooperativas e ONGs.</p>
<ion-button outline color="secondary" navPush="RequestPermissionsPage">
Começar agora
</button>
</ion-slide>
</ion-slides>
</ion-button>
</ion-content>
how to fix to build successfull
2 posts - 2 participants