Horizontal scrolling section in mobile

[Mario Santos]

Description

In order to make the mobile experience better, there are going to be some sections like Frontity flow or Frontity features, that will be navigated through horizontal scrolling instead of showing the whole content.

To understand this better, check in the mobile design the Frontity features section.

HTML

Our first idea here is to include a parent div with the class dots-carrousel or bar-carrousel, and each item included in the swipe would be another div with the class carrousel-item. Here we have an example:

<div class="wp-block-group dots-carrousel">
    <div class="wp-block-group__inner-container">
        <div class="wp-block-group carrousel-item">
            <div class="wp-block-group__inner-container">
                <h4>Element 1</h4>
                <p>Text of element 1</p>
            </div>
        </div>
        <div class="wp-block-group carrousel-item">
            <div class="wp-block-group__inner-container">
                <h4>Element 2</h4>
                <p>Text of element 2</p>
            </div>
        </div>
    </div>
</div>

Where to check

• Invision Homepage (mobile) - WP+React made easy (dots carrousel) and Frontity features (bar carrousel.
• /common-styles/ page - dots carrousel and bar carrousel

[David Arenas]

@SantosGuillamot and I decided to divide this issue into 3 different ones:

• Horizontal scrolling section: used in "Why Frontity" section. (#15)
• "What people are saying" section.
• "WP + React made easy" section. (#51 )

The problem I saw is that we cannot use different components for mobile and desktop a the last two ones look very different in desktop so we can reuse the same component.

We can reuse some logic and components for them tho (like the dots bar).

@SantosGuillamot, remember to open the new issues and link them in the list above! 😁

[Mario Santos]

I've just create the issue for the "WP + React made easy" (#51). For the other one, "What people are saying", I want to talk with the designer first to clarify how are we going to handle the different tweets sizes and check if it makes sense to reuse the horizontal scrolling for this as well.