Published on Sep 29, 2020

Fullscreen Horizontal Scrolling in Oxygen

Sridhar Katakam

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").

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right