Ionic, Problem with slider image

Ionic Framework ionic-v3
1

Hey guys, I have trouble on dealing with this problem. When the user click the gallery view(the blue icon), there will be display of all the images from the slider(gallery page) and I want the user able to click any desire image from the gallery then it direct them back to the slider of the selected image/page number.

I appreciate any help and I also include screenshot of the layout.

home-html%20(2)
home-html (2).JPG320×555 14.7 KB
gallery
gallery.JPG320×563 28.9 KB

home.html

<ion-content>
  <ion-slides>
    <ion-slide *ngFor="let post of magjan">
      <ion-card style="width:20%">
        <ion-icon style="color:blue" name="images" (click)="gridView()"></ion-icon>
      </ion-card>
      <img src="{{post.image}}" imageViewer="{{post.image}}">
      <p>Page {{post.number}} out of 10</p>
    </ion-slide>
  </ion-slides>
</ion-content>

gallery.html

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col col-6 col-md-4 col-xl-3 *ngFor="let post of magjan">
        <ion-card>
          <img src="{{post.image}}" imageViewer="{{post.image}}">
          <p style="text-align:center">Page {{post.number}} of 10</p>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

home.ts and gallery.ts (same content)

  magjan = [
    {
      image: 'http://78.media.tumblr.com/26f1db79797aaf8577a32e288c5afefd/tumblr_n7yhhvUQtx1st5lhmo1_1280.jpg',
      number: '1'
    },
    {
      image: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-01.jpg',
      number: '2'
    },
    {
      image: 'http://neonrobot.com/wp-content/uploads/2014/09/unsplash-1.jpg',
      number: '3'
    },
    {
      image: 'http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-04.jpg',
      number: '4'
    },
    {
      image: 'https://images.unsplash.com/5/greece-2.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fd07201058f3482d045183f114d92402&w=1000&q=80',
      number: '5'
    },
    {
      image: 'https://beautifulpixels.com/wp-content/uploads/2018/03/unsplash-apple-tv-app.png',
      number: '6'
    },
    {
      image: 'https://images.unsplash.com/reserve/m6rT4MYFQ7CT8j9m2AEC_JakeGivens%20-%20Sunset%20in%20the%20Park.JPG',
      number: '7'
    },
    {
      image: 'https://unsplash.com/a/img/marketing/unsplash-hq-05.jpg',
      number: '8'
    },
    {
      image: 'https://unsplash.com/a/img/marketing/unsplash-hq-04.jpg',
      number: '9'
    },
    {
      image: 'https://cdn-images-1.medium.com/max/2000/1*D8IMopmT21mzjdFx3zOzlA.jpeg',
      number: '10'
    }

  ];
  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

//only for home.html
  gridView(){
    this.navCtrl.push(GridviewPage);
  }