如何在移动设备上垂直显示幻灯片?

How to display slides vertically on mobile devices?

我有以下HTML。请注意,第二部分有一个在桌面上水平显示的视图幻灯片。

<section class="section" data-anchor="firstPage">
    <h1>Section 1 - intro</h1>
</section>

<section class="section periods" data-anchor="secondPage">
    <div class="slide" data-label="secondPage">
        <h1>Section 2 - Intro</h1>
    </div>
    <div class="slide" data-label="1770"><h1>1770</h1></div>
    <div class="slide" data-label="1870"><h1>1870</h1></div>
    <div class="slide" data-label="1970"><h1>1970</h1></div>
</section>

在移动设备(宽度小于 767 像素)上,我想垂直显示幻灯片而不滚动。我怎样才能做到这一点?我可以通过配置全页参数来实现吗?

看来我必须购买一个完整的页面扩展才能让它工作。