Building a Simple Wallpaper App with Ionic 2 and Angular 2 TypeScript Part III - Adding Slides To Preview Images

In part 2 we created a simple gallery using Ionic 2 grid component to show a list of our wallpaper images. Now in our third post we will add sliding feature to our application. When user taps on an image's thumbnail, it will open as full screen and our users will be able to navigate between images by sliding left and right.

Let's add our slide page first with this command:

ionic g page slide 

After command finished executing, a slide folder and our slide page's files will be generated:


Delete contents of generated files and copy the following code into slide.html:

<ion-row class="slideRow">
  <ion-col class="slideColumn">
    <button ion-button class="slideBackButton" light small outline (click)="goBack()">Back</button>
  </ion-col>
</ion-row>
<ion-slides #mySlider [options]="mySlideOptions">
  <ion-slide *ngFor="let slide of slides">
    <img [src]="slide.image.path" class="slide-image" />
  </ion-slide>
</ion-slides>

Copy the below code into slide.ts:

import { Component, OnInit, ViewChild, AfterViewInit, } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { Slides } from 'ionic-angular';
import { Image } from '../../app/image';
import { IMAGES } from '../../app/Images';
import { AlertController } from 'ionic-angular';

/*
  Generated class for the SlidePage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'slide.html',
})
export class SlidePage {
  plugins: any;
  image: Image;
  slides = [];
  mySlideOptions = {
    loop: true
  };
  @ViewChild('mySlider') slider: Slides;

  constructor(public alertCtrl: AlertController, private navCtrl: NavController, private platform: Platform, params: NavParams) {
    this.image = params.get("selectedImage");
    let slideCount = 0;
    for (var i = this.image.id; i < IMAGES.length; i++) {
      this.slides[slideCount] = { image: IMAGES[i] };
      slideCount++;
    }
    for (var j = 0; j < this.image.id; j++) {
      this.slides[slideCount] = { image: IMAGES[j] };
      slideCount++;
    }
  }
  goBack() {
    this.navCtrl.pop();
  }
}

And here is our slide.scss:

ion-slide {
    background-color: #000000;
}
ion-col.slideColumn{
    background-color: #000000;
}
ion-row.slideRow{
    background-color: #000000;;
    height: 7%;
}
ion-slide img {
    height: auto !important;
    width: auto !important;
}

Now we completed our slide feature. When you open the application and tap on an image, our second page should open and look like this: