{"id":5162,"date":"2019-04-04T02:00:00","date_gmt":"2019-04-04T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/how-to-use-fullpage-in-webflow-create-full-screen-slider\/"},"modified":"2025-06-10T10:34:16","modified_gmt":"2025-06-10T08:34:16","slug":"how-to-use-fullpage-in-webflow-create-full-screen-slider","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/how-to-use-fullpage-in-webflow-create-full-screen-slider\/","title":{"rendered":"Use fullPage.js slider in Webflow to create a full-screen slider"},"content":{"rendered":"\n

If you want to create a full-screen website in Webflow<\/a> to scroll through multiple fullscreen sections when using the mouse wheel or trackpad, then using fullPage.js<\/a> is the solution for it. This way you’ll be able to create a full-page slidehow in a matter of minutes!<\/p>\n\n\n\n

\n
See Webflow Clonable<\/a><\/div>\n<\/div>\n\n\n\n

Creating the layout<\/h2>\n\n\n\n

fullPage.js is a Javascript library that requires us to follow certain structure<\/a> in order to use it. More precisely the following one:<\/p>\n\n\n

<div<\/span> id<\/span>=\"fullpage\"<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"section\"<\/span>><\/span>Some section<\/div<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"section\"<\/span>><\/span>Some section<\/div<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"section\"<\/span>><\/span>Some section<\/div<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"section\"<\/span>><\/span>Some section<\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
To replicate the necessary structure, we will start by adding a div block that will be the container for all our full-screen sections on the site.<\/p>\n\n\n\n
\"Adding<\/figure>\n\n\n\n
We will give it the id fullpage<\/code>.<\/p>\n\n\n\n
\"Setting<\/figure>\n\n\n\n
And we will set its height to 100vh<\/code>.<\/p>\n\n\n\n
\"Setting<\/figure>\n\n\n\n
Inside that container we will be adding more div blocks<\/code>, each of them will be a fullscreen section on our site.
 We can add one and copy and paste the others. Each of them will have to use the class section<\/code>.<\/p>\n\n\n\n
\"Setting<\/figure>\n\n\n\n
\"Tree<\/figure>\n\n\n\n
fullPage.js creates part of the magic once the page has loaded, such as creating the full-width and full-height sections behind the scenes. But because we are now working with the Webflow editor, we will need to do those same tasks in our editor first so we can see the site as it would look like when applying fullpag.js.<\/p>\n\n\n\n
To do so, we will set the properties width<\/code> and height<\/code> of our sections to 100%<\/code>. Additionally, if we want to have centered content, then we can set the display options to flex<\/code> with a center<\/code> align and justify layout options.<\/p>\n\n\n\n
\"Setting<\/figure>\n\n\n\n
And that’s it! Now we have the main layout!<\/p>\n\n\n\n
Our structure should look like this in our navigator tab:<\/p>\n\n\n\n
\"Sections<\/figure>\n\n\n\n
We can now add a background color by clicking on each of our sections and adding a different class to each section such as “section-1”, “section-2” and “section-3” and then changing each section’s background color.<\/p>\n\n\n\n
Adding the fullpage.js component<\/h2>\n\n\n\n
When using any of the paid plans that Webflow provides<\/a>, you can make use of what they call “custom code<\/strong>“. (The previous link is an affiliate link, so if you want to get a payed plan, please consider using that link, I’ll appreciate it!)<\/p>\n\n\n\n
With these options, we will be able to:<\/p>\n\n\n\n