Friday, 16 February 2018

Creating an Intro Slider in Ionic 2 and ionic 3 Application

Every Mobile Application needs an intro slides to notify user about the features of the app they have installed. Intro slides gives the users the much needed information about the app, a tutorials on the welcome screen. Ionic Framework Provides developers with a component called ion-slides which makes it easy to create an intro slider for your ionic application.

Create an Intro Page

Execute below command in your projects command prompt to add intro page to your project "pages" folder in "src" directory.


  ionic generate page intro
this will generate intro folder in your project's src/pages folder.
Note : import the intro page in to your app module and add it to the declarations and entryComponents, if your cli does not create an "intro.module.ts" file in your new page file (ie in intro folder). the "app.module.ts" should look something like this after intro page is imported.

Modify app.module.ts file

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { IntroPage } from '../pages/intro/intro';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    IntroPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    IntroPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},

  ]
})
export class AppModule {}

Now, that's out of or way, let's head forward and modify our intro template page.

Change intro.html file as given below

Copy and Paste the below html code in your intro.html file.

intro.html


    <ion-content padding>
  <ion-slides (ionSlideDidChange)="slideChanged()"> 
    <ion-slide *ngFor="let item of IntroInfo">
      <img class="imageStyle" src="{{item.image}}"/>    
      <h1>{{item.subject}}</h1>
      <p *ngIf="item.description">{{item.description}}</p>
      <button *ngIf="item.buttontext" ion-button color="light">{{item.buttontext}}</button>
    </ion-slide>

  </ion-slides>
</ion-content>  

ionSlideDidChange event call the slideChanged method when ever the slide is changed. ngIf condition for button is, that it will be only viewable when ther's a buttontext key in the list item. now lets check the ts file for the corresponding intro.html file.

Modify intro.ts file as shown below.

Copy and Paste the below ts code in your intro.ts file.

intro.ts


  import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

/**
 * Generated class for the IntroPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-intro',
  templateUrl: 'intro.html',
})
export class IntroPage {
  @ViewChild(Slides) slides: Slides;
  public IntroInfo:any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
     this.IntroInfo = [{image:"assets/welcome.png",subject:"MyWeather",description:"Get all the weather information in one place."},
                       {image:"assets/sunny.png",subject:"Its hot Today!",description:"Whether it's hot.."},
                       {image:"assets/freezing.png",subject:"climate is freezing, isn'nt it!",description:"whether it's freezing.."},
                       {image:"assets/continue.png",subject:"Get Started..",buttontext:"Continue"}]
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad IntroPage');
  }

    // Below function when executed starts autoplay of the slides.

  autoSlideStart(){
    this.slides.startAutoplay()
  }

   // Below function when executed stops autoplay of the slides.

  autoSlideStop(){
    this.slides.stopAutoplay()
  }
    // Below function when executed Traverse to a specified slide given.

  goToSlide() {
    this.slides.slideTo(2, 500, true);  // where 2 is the index, 500 is speed and true is Whether or not to run ionSlideWillChange/ionSlideDidChange events when the slide is changed.
  }

    // Below function when executed will Traverse to Next slide.

  goToNSlide(){
    this.slides.slideNext(500, false)     // where 500 is speed and false is Whether or not to run ionSlideWillChange/ionSlideDidChange events when the slide is changed.
  }

    // Below function when executed will Traverse to previous slide.

  goToPSlide(){
    this.slides.slidePrev(500, false)     // where 500 is speed and false is Whether or not to run ionSlideWillChange/ionSlideDidChange events when the slide is changed.
  }

    // Below function Get's the index of the active slide.

  slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    console.log('Current index is', currentIndex);
  }

    // Below function Get's the index of the previous slide.

  getBeforeIndex(){
    let previousIndex = this.slides.getPreviousIndex();
    console.log('Previous index is', previousIndex);
  }

    // Below function Get whether or not the current slide is the first slide.

  isSlideFirst(){
    let firstSlide = this.slides.isBeginning()
    console.log('Current slide is the first slide', firstSlide);
  }

    // Below function Get's whether or not the current slide is the last slide.

  isSlideEnd(){ 
    let endSlide = this.slides.isEnd()
    console.log('Current slide is the last slide', endSlide);
  }

  // Below function gets the total number of slides.

  slideLength(){   
    let endSlide = this.slides.length();
    console.log('Number of slides are : ', endSlide);
  }

  // Below function when set to true the user will not be able to swipe to the next slide. Set to false to unlock this behaviour.

  lockNextSlide(){
    let shouldLockSwipeToNext = true; //  shouldLockSwipeToNext can be either true/false
    let lockNSlide = this.slides.lockSwipeToNext(shouldLockSwipeToNext);
    console.log('Number of slides are : ', lockNSlide); 
  }

  // Below function when set to true the user will not be able to swipe to the previous slide. Set to false to unlock this behaviour.

  lockPrevSlide(){
    let shouldLockSwipeToPrev = false; //  shouldLockSwipeToPrev can be either true/false
    let lockNSlide = this.slides.lockSwipeToPrev(shouldLockSwipeToPrev);
    console.log('Number of slides are : ', lockNSlide); 
  }

  // Below function when set to true user's can not swipe in either direction on slide. False allows swiping in both directions.

  lockAllSlide(){
    let shouldLockSwipes = true; //  shouldLockSwipes can be either true/false
    let lockNSlide = this.slides.lockSwipes(shouldLockSwipes);
    console.log('Number of slides are : ', lockNSlide); 
  }

  // Below function when executed update's the slides structure. Call this if you’ve added or removed child slides.

  updateTheSlides(){
    this.slides.update()
  }
  

}

the above ts file contains all the methods, ionic slides provide to us. their use and functionality is written as comments above the respective functions. thats it, if you like you can adjust the slide image width with the below class.

styling the slides

Copy and Paste the below css code to your Components .scss file.

intro.scss


 page-intro {
   .imageStyle{
       width:50%;
   }
}

that's it, now save the changes and restart the server to view the intro slides in action.

0 comments:

Post a Comment