This tutorial provides the steps to set up fullPage, a JavaScript library for fullscreen scrolling in Oxygen as per this (coming soon) demo page.
We are going to create four sections with fixed navigation at the top and dot circle navigation at the right.
Also, the second section is going to contain 3 horizontal slides.
Live Demo (coming soon)
Step 1
Install and activate my custom functionality plugin.
Upload fullpage.min.css to plugin’s assets/css directory using a FTP client.
Upload fullpage.min.js to plugin’s assets/js directory.
Inside plugin.php’s custom_enqueue_files(), add
wp_enqueue_style(
'fullpage-css',
plugin_dir_url( __FILE__ ) . 'assets/css/fullpage.min.css'
);

wp_enqueue_script(
'fullpage',
plugin_dir_url( __FILE__ ) . 'assets/js/fullpage.min.js',
array( 'jquery' ),
'3.0.0',
true
);

You might want to place the above inside an if conditional to restrict these files to load only on specific pages/views of your site per your design needs.
Ex.:
if ( is_front_page() ) {
wp_enqueue_style(
'fullpage-css',
plugin_dir_url( __FILE__ ) . 'assets/css/fullpage.min.css'
);

wp_enqueue_script(
'fullpage',
plugin_dir_url( __FILE__ ) . 'assets/js/fullpage.min.js',
array( 'jquery' ),
'3.0.0',
true
);
}

Step 2
Edit your Page/Post/Template in Oxygen.
Do not inherit from any other template like Main because we are not going to show the default sitewide header and footer and instead add a custom navigation with links to the in-page sections.
Here is an export of my entire demo page. To import this, copy all the code, click on +Shortcodes, paste, save/update and edit to personalize.
If you prefer to set this up manually, follow the below instructions.
Set up a structure like this:

Parent Div
Add a class of fullpage.
Each Section
Add a class of section.
With this class selected, set text color to #fff, set child elements to stack vertically and center horizontal item alignment.

In the Advanced > Layout, set items to be centered vertically as well.

Individual sections
Select the ID of each section and set it a unique background color.
#ff5f45
#0798ec
#fc6c7c
#fec401
Section 1
Inside Section 1 of the demo page, I’ve added a H1 heading, a H2 heading and a div that has 3 horizontal buttons.

Section 2 (the section that has slides)
I’ve placed 3 divs in this section and the content of each div forms the content of the slide.

Add a class of slide to each div.
Set horizontal and vertical center alignment.

Section 4
I’ve set this as the background image.
Background Size: manual
Background Repeat: no-repeat
Left: 50%
Top: 100%
Code Block
PHP & HTML:

CSS:
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
.admin-bar #menu{
top: 32px;
}
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: #fff;
}

.fp-controlArrow.fp-prev {
left: 55px;
}

.fp-controlArrow.fp-next {
right: 55px;
}

.fp-slide.fp-table {
display: table;
}

@media only screen and (max-width: 600px) {

.fp-controlArrow.fp-prev,
.fp-controlArrow.fp-next {
display: none;
}

}

Javascript:
new fullpage('.fullpage', {
anchors: ['section1', 'section2', 'section3', 'section4'],
scrollingSpeed: 1000,
navigation: true,
slidesNavigation: true,
menu: '#menu',
responsiveHeight: 330
});

That’s it! This should be treated only as an example of implementing fullPage.js in Oxygen.
fullPage has several other options and paid addons that you can explore further if you are interested.

Copyright © 2017-2023 JAG CONSULTING SAS
arrow-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram