How to integrate fullPage.js with Bricks

This tutorial provides the JavaScript and CSS codes that can be pasted in order to integrate the JS library fullPage.js inside Bricks Builder.

The HTML Structure

fullPage.js requires a specific DOM structure in order to work. it needs:

• a wrapper. We are going to use the <main> element of our site.
• the inner sliding sections need to be direct children of the wrapper. We will use section elements as our sliding sections (available from version 1.5).
• the horizontal slides need to be direct children of the sliding section. So we will use container elements for our horizontal slides.

Here is the final structure of our example:

We also need to assign a class slide to each horizontal slide:

Enqueue the fullPage.js files

The first thing to do is to download the dist files from here: https://github.com/alvarotrigo/fullPage.js/tree/master/dist and download the following files:

• fullpage.min.js
• fullpage.min.css

Once downloaded, make sure to upload these files inside your child theme. To keep things organized, we uploaded them in the following directories of our child theme:

• /js/fullpage/fullpage.min.js
• /css/fullpage/fullpage.min.css

We also need to create a script.js file inside our /js/ directory where we’ll add our init code.

Now it’s time to enqueue your files. Open the functions.php file or your child theme and enqueue yours files like this:

add_action( 'fullpagejs_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {

        // Fullpage
        wp_enqueue_script( 'fullpage', get_stylesheet_directory_uri() . '/js/fullpage/fullpage.min.js', array(), '4.0.9' );
        wp_enqueue_style( 'fullpage', get_stylesheet_directory_uri() . '/css/fullpage/fullpage.min.css', '4.0.9' );

        // Init
        wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array('fullpage'), filemtime( get_stylesheet_directory() . '/js/script.js' ) );
	}
} );

Pay attention that, right now, we are initializing the script on every page of our site. That’s probably not what you are looking for, but that’s out of the scope of this tutorial. Here is a good discussion about conditional enqueue if you are willing to dig more into it.

Add some CSS

From our tests, we will require to add a few rows of CSS in order to make it looks good on frontend and avoid flash of unstyled content. Copy/paste the following CSS to the style.css file of your child theme:

body #brx-content {
    display: block;
    min-height: 100vh;
}
body.bricks-is-frontend #brx-content > section {
    opacity: 0;
    transition: 300ms opacity ease;
} 
body.bricks-is-frontend #brx-content > section.fp-section {
    opacity: 1;
}

Initialize the script

The final step is to initialize the fullPage.js script.

Copy/paste the following code inside the script.js file you created earlier:

window.addEventListener('load', () => {
    if (!document.body.classList.contains('bricks-is-frontend') ){
    return;
    }

    // Fullpage
    new fullpage('#brx-content', {
        //options here
        autoScrolling:true,
        sectionSelector: '#brx-content > section',
        slideSelector: '#brx-content > section .slide',
        fixedElements: '#brx-header, #brx-footer',
    });
});

There are a lot more options you can add, just refer to the official documentation.

Final result

If everything worked as expected, here is what you should see on the frontend:

Conclusion

Before adding fullPage.js to your website, make sure to read their terms & conditions carefully and – if it applies to your project – purchase a valid license. Happy sliding!