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!