First you should know how to use this plugin outside webflow.
So read the docs - also its helpfull to download codepen (right corner - click "export → download as zip) and play with the example,
On webflow you should:
1. Required HTML structure
Create the correct markup (add classes and #id for the wrapper)
This is very easy step (inspect your publish site and see if your editor tree match this structure)
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
2. Including files:
Add all assets (dont add Jquery - webflow already call for this libary). - put the CSS in the head. Put the JS before close body.
assets list
Best for performance to use CDN (use the Minify version - .min)
For example in your head copy-paste this line (CDN “copy script tag”)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css" />
3. Initialization
Put this code before body tag (after the CDNs call). For more options read the docs
$(document).ready(function() {
$('#fullpage').fullpage();
});
custom attributes
If you want to add anchors - this is how you add data-attributes like data-anchor="slide1"on webflow (very usefull):
Publish VS editor
Thats it. Now you will see the live fullpage works only on publish site. Its not 100% great = but if you set on webflow your sections to be height 100VH the live VS editor site will be ± the same (in the editor you wont see the menus, scroll effect and so on)
** Note. You must know little JS-html-css. fullpage.js is not the first libary to start with - if you dont know how to use jQuery plugins. Start with simple examples like this one:
Note-2 its not so easy to explain this issue (its more for video tuturial or course) - so try this steps - than add URL if something wont -work: