Q: How to change the layout of ion-slide? I'm trying to use ion-slides:
<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>

However, I was expecting the flow of content to be top-to-bottom rather than having the "Welcome" header to the left.
I've looked at the slider layout documentation but I couldn't see how to change the layout to flow vertically down the page.

By inspecting the css in the browser debugger, I figured out that I could change the flex model and by adding the following to my page.scss it appears to fix the problem.  Is there a more 'ionic' way to solve this?
.swiper-slide {
    flex-direction: column;
}


Apologies if this question is very basic, I'm a data specialist so front end development is not (yet) a strength of mine.

A: The solution for me was to add the following css:
.swiper-slide {
    flex-direction: column;
}

