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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: