<ion-content>
<ion-slides pager (ionSlideDidChange)="slideChanged()">
<ion-slide>
<div class="slider1">
<ion-icon class="icon" name="create"></ion-icon>
</div>
<h2>Custom URL.!</h2>
<p>Create custom URL and add notes.!</p>
</ion-slide>
<ion-slide>
<div class="slider2">
<ion-icon class="icon" name="lock"></ion-icon>
</div>
<h2>Make it Private.!</h2>
<p>Add password to your url for private data .!</p>
</ion-slide>
<ion-slide>
<div class="slider3">
<ion-icon class="icon" name="color-fill"></ion-icon>
</div>
<h2>Coloured.!</h2>
<p>Make your notes coloured as you want.!</p>
</ion-slide>
<ion-slide>
<div class="slider4">
<ion-icon class="icon" name="copy"></ion-icon>
</div>
<h2>Copy.!</h2>
<p>Easily copy content from notes.!</p>
</ion-slide>
</ion-slides>
</ion-content>
<ion-footer>
<ion-grid>
<ion-row>
<ion-col col-6>
<button ion-button clear color="dark" *ngIf="currentIndex > 0" (click)="prevSlide()">
PREV
</button>
</ion-col>
<ion-col col-6 text-right padding-right>
<button ion-button clear (click)="nextSlide()" color="dark" *ngIf="currentIndex < 3">
NEXT
</button>
<button ion-button clear (click)="finish()" color="dark" *ngIf="currentIndex === 3">
FINISH
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, Slides } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
styleUrls: [ './home.scss' ]
})
export class HomePage {
@ViewChild(Slides) slides: Slides;
currentIndex = 0;
totalSlide = 3;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
nextSlide() {
this.currentIndex++;
this.slides.slideTo(this.currentIndex);
}
prevSlide() {
this.currentIndex--;
this.slides.slideTo(this.currentIndex);
}
slideChanged() {
this.currentIndex = this.slides.getActiveIndex();
}
finish() {
localStorage.setItem('isIntroDone', 'yes');
this.navCtrl.setRoot(HomePage);
}
}
.swiper-pagination-bullet-active {
background: #000 !important;
opacity: 1 !important;
}
.slider1 {
height: 68%;
background: #00c6ff; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #0172ff, #00c6ff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #0172ff, #00c6ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.slider2 {
height: 68%;
background: #fdc831; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #f37336, #fdc831); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #f37336, #fdc831); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.slider3 {
height: 68%;
background: #f85032; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #e73928, #f85032); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #e73928, #f85032); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.slider4 {
height: 68%;
background: #a34aff; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #6a3093, #a34aff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #6a3093, #a34aff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.swiper-slide {
-webkit-align-items: normal !important;
align-items: normal !important;
}
.icon {
margin-top: 20%;
font-size: 120px;
color: #fff;
}
.footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before {
background-image: none !important;
}