如何更改离子滑梯的布局？

Question

我正在尝试使用离子幻灯片：

<ion-content>
    <ion-slides pager="true" [options]="slideOpts">
        <ion-slide class="step-one">
            <h1>Welcome</h1>
            <p>Lorem ipsum dolor sit amet, massa nam ante. Vel lacus viverra volutpat tortor ligula ornare, varius ut mauris ipsum mus torquent, scelerisque suspendisse penatibus, purus et arcu ipsum vehicula quam luctus. Consectetuer sed urna accumsan. Nec viverra felis varius pretium, volutpat in et cras, odio consectetuer lacinia risus feugiat sit etiam, commodo pulvinar, dolor non et inventore.</p>
        </ion-slide> 
        <ion-slide class="step-two">
            <h1>Heading</h1>
            <p>blah, blah</p>
        </ion-slide>    
        <ion-slide class="step-three">
            <h1>Heading</h1>
            <p>blah, blah</p>
            <ion-button (click)="end()">END</ion-button>
        </ion-slide>
    </ion-slides>
</ion-content>

但是，我希望内容流是自上而下的，而不是左侧的“欢迎”标题。

我查看了slider layout documentation，但看不到如何更改布局以垂直向下流动。

通过在浏览器调试器中检查 css，我发现我可以更改 flex 模型，并将以下内容添加到我的 page.scss 似乎可以解决问题。有没有更“离子”的方法来解决这个问题？

.swiper-slide {
    flex-direction: column;
}

---

抱歉，如果这个问题非常基础，我是一名数据专家，所以前端开发（还）不是我的强项。

Answer 1

我的解决方案是添加以下 css：

.swiper-slide {
    flex-direction: column;
}