Swipe & Clickable image

ionic-v1
1

Hi, for my project I am planning to make a list of image vertically and swipe-able just like Instagram Stories. I also want to make each image to be click-able to different pages.

I have this code which helps me lot to make the images swipe-able vertically but to make it clickable to different pages is a problem.

This is the code for the swipe-able image:

-------------------------------------------- home.html -----------------------------------------------

<ion-content>
  <ion-slides class="image-slider" loop="true" slidesPerView="5">
    <ion-slide *ngFor="let img of images">
      <img src="assets/imgs/{{img}}" class="thumb-img"/>
    </ion-slide>
  </ion-slides>
</ion-content>

-------------------------------------------- home.ts -----------------------------------------------

export class HomePage {

  images = ['1.png', '2.png', '3.png', '4.png','5.png', '6.png', '7.png'];

}

If you cant understand with my question, you can imagine the interface of Instagram Stories. The interface is exactly like that but I would like to click on each image which make it redirect to other page (Different image clicked, different page opened)

Thank You

2

Simply add a (click)="doSomething()" to the slide or image.

If this does not work - add a wrapper in your slide around the image, with height and width 100% and add the click listener there

3

Hi, do you mean it like this? Because I’ve actually tried it but it will only redirect to one page that I linked only.

How I want it to be is, for example: image 1 --> page 1, image 2 --> page 2 etc (refer to the image i have attached)

<ion-content>
  <ion-slides class="image-slider" loop="true" slidesPerView="5">
    <ion-slide *ngFor="let img of images">
      <img src="assets/imgs/{{img}}" class="thumb-img" (click)="doSomething()"/>
    </ion-slide>
  </ion-slides>
</ion-content>

2018-08-01

Thank you