Javascript 使离子载玻片垂直滑动

我有一个

start.html

文件，它具有的options属性是，我将在类StartPage的options1中定义它们

---

您需要在

离子幻灯片

组件中添加选项，如图所示

{{last？}让我们开始：“跳过”}

您可以通过添加“方向”参数使幻灯片垂直

<ion-slides direction="vertical">

</ion-slides>

---

默认情况下，幻灯片是水平的。

在新版本的ionic中，我们可以通过将

[选项]

值传递到

来轻松实现垂直滚动

这里有一个例子

// page.ts
export class SlideClass {
  slideOptions = {
    direction: 'vertical',
  };
  constructor(){}
 
}

// html file
<ion-slides [options]="slideOptions">

//page.ts
导出类幻灯片类{
幻灯片选项={
方向：'垂直'，
};
构造函数（）{}
}
//html文件

我们可以在这里找到更多的选择

<ion-slides [options]="option1">
    <ion-slide *ngFor="let slide of slides; let last = last">
        <img [src]="slide.image" class="slide-image" />
        <h2 class="slide-title" [innerHTML]="slide.title" style=""></h2>
        <p [innerHTML]="slide.description"></p>

        <div id="skip-b">
            <button (click)="dismiss()">
      {{last ? "Let's Begin" : "Skip" }}
      <ion-icon name="arrow-forward"></ion-icon>
    </button>
        </div>
    </ion-slide>
</ion-slides>

<ion-slides direction="vertical">

</ion-slides>

// page.ts
export class SlideClass {
  slideOptions = {
    direction: 'vertical',
  };
  constructor(){}
 
}

// html file
<ion-slides [options]="slideOptions">