Search code examples
fullpage.js

How to display slides vertically on mobile devices?

I have the following HTML. Please note that the second section has a view slides which display horizontally on desktops. 

<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>

On a mobile device (smaller than 767px in width), I would like to show slides vertically without scrolling. How can I do this? Can I do this by configuring fullPage parameters?

Solution

  • It seems I have to buy a fullPage extension to get it work.