Ionic 5 vertical slide

Question

I take ionic 5, I would like to have a vertical slide from the bottom to the top in my application. I tried to implement it but it doesn't work.

<ion-slides pager direction="vertical">
  <ion-slide>

  </ion-slide>
 </ion-slides>

Answer 1

direction is not a property of the ion-slides element, it is a configuration option of swiper.

To use it in Ionic, you set the direction property on the ion-slides options to 'vertical':

slideOpts = {
    direction: 'vertical',
    initialSlide: 0,
    speed: 400,
};

Your HTML template should already contain something like:

<ion-slides pager="true" [options]="slideOpts">
    <ion-slide>
        <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide>
        <h1>Slide 2</h1>
    </ion-slide>
    <ion-slide>
        <h1>Slide 3</h1>
    </ion-slide>
</ion-slides>