This tutorial provides the steps to set up fullPage, a JavaScript library for fullscreen scrolling in Oxygen as per this 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

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:

<ul id="menu">
    <li data-menuanchor="section1" class="active"><a href="#section1">First section</a></li>
    <li data-menuanchor="section2"><a href="#section2">Second section</a></li>
    <li data-menuanchor="section3"><a href="#section3">Third section</a></li>
    <li data-menuanchor="section4"><a href="#section4">Fourth section</a></li>
</ul>

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.

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

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • How does section 2 divs know to become a slider? Is it just adding the class of “slide” that does the trick? is the class .slider an Oxygen default style or did I missing something in the js or css that made those divs into sliders? I couldn’t replicate the sliders in section 3 which is an empty section, but I copied the 3 divs from section 2 with the class of “slider” intact. I was expecting the same slider to appear in section 3 (which is now basically a copy of section 2) But it doesn’t show up in section 3. How was the slider created in section 2? This is driving me nuts trying to figure this out.

    • “How does section 2 divs know to become a slider? Is it just adding the class of “slide” that does the trick?”

      Yes. As can be seen from https://github.com/alvarotrigo/fullPage.js#required-html-structure,

      In order to create a landscape slider within a section, each slide will be defined by default with an element containing the slide class

      “is the class .slider an Oxygen default style or did I missing something in the js or css that made those divs into sliders?”

      There is no .slider class anywhere. Isn’t it?

      Are you trying to create sliders in multiple sections?

  • Hi, thanks for your tutorial its fabulous !

    i was wondering how to put a sticky logo in the ‘header’ next to the menu , as there is no header builder ?

  • Hi – have you had any problems with Edge? Starts on section 2 for me and 3rd not working either. So, starts on 2 (slides work fine) them skips 3 but highlights the button and shows 4.

  • Good morning, beautiful guide! 😄 is it possible to block (fixed) the background and to scroll only the content?

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: