Vertical ion-slides don't work at all

Ionic Framework
1

I tried the below right inside the main tag

<ion-content>
  <ion-slides direction="vertical">
    <ion-slide>
      <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide>
      <h1>Slide 2</h1>
    </ion-slide>
  </ion-slides>
</ion-content>

Without the direction, or setting to horizontal, it always works fine horizontally… but it just won’t work vertically. No matter what it just tries to slide horizontally

Running ionic v 6.11.0

2

According to the Swiper API, you have to pass the ‘direction’ property through the options attribute on ion-slides
HTML

<ion-slides [options]="slideOpts">
    ...
</ion-slides>

TS

export class YourPageComponents {

    public slideOpts: any = {
        direction: 'vertical'
    }
}
1 Like
3

holy moly that did it thanks!