Fullscreen Horizontal Scrolling in Oxygen

This members-only tutorial provides the steps to set up full screen images that can be scrolled horizontally using the mouse wheel.

We shall set up the images as backgrounds to have the flexibility of showing any content on top.

Step 1

Create and edit your Page/Template with Oxygen.

In this example, let us work with a Page that is NOT set to be inherited from a Page Template (which itself inherits from the sitewide Main Catch All Template that has a header, Inner Content and footer) - so essentially without a header and footer.

Add a Section.

Select Child Element Layout > Stack Child Elements Horizontally.

Container Padding: 0 on all sides.

Height: 100vh

Section Container Width: full-width

Set overflow to scroll.

Add a Div inside the Section.

Set your desired first image as the Background Image.

Add a class of say, fs (standing for "fullscreen").