如何改变离子载玻片的布局？

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>

但是，我期望内容的流动是自上而下的，而不是在左侧具有“ Welcome”标题。

我看过slider layout documentation，但看不到如何更改布局以垂直向下流到页面。

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

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

---

很抱歉，如果这个问题很基本，我是一名数据专家，所以前端开发还不是我的能力。

Answer 1

对我来说，解决方案是添加以下CSS：

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