Integrate fullPage.js script into custom code

Design help Custom code
1

Hi peeps!

I’m trying to integrate an external script from this site : fullPage.js | One Page Scroll sections Site Plugin for their slide show function. But I have no idea how to use it on webflow. Would love some help!

2

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:

Webflow related topic/Q:

Related links:

3 Likes
3

Brilliant! This is extremely helpful thank you so much.

So far I’ve added the header and body code in the screenshots here (did I do it right?)

49 AM
49 AM1168×644 34 KB
55 AM
55 AM1163×494 34.2 KB

I’m confused as to where to insert the HTML 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>

Do I put the above in the “Head Code” section too?

4

NO!! :slight_smile: This is regular HTML output.
You create this structure by webflow elements (webdflow drag-and-drop features).

  1. Drag and drop div and add to this div the id fullpage
  2. Inside this div drag and drop X divs (in this example X=4) - add for each div the class “section”
  3. Put any content you want inside this div.section (Do not put any other content inside id=“fullpage”. “save the structure” This for example will break the layout:
    <!-- wrong structure -->
    <div id="fullpage">
       <h1>Hello</h1>
       <ul>
          <li>List item</li>
       </ul>
       <div class="section">Put the content her</div>
       <div class="section">Some section</div>
       <div class="section">Some section</div>
       <div class="section">Some section</div>
        <footer>
           2017
       </footer>
    </div>

This is OK:

    <!-- working structure -->
    <div id="fullpage">
       <div class="section">
           <h1>Hello Section One</h1>
           <ul>
              <li>List item</li>
          </ul>
          <footer>
              2017
         </footer>
       </div>
       <div class="section">Some section</div>
       <div class="section">Some section</div>
       <div class="section">Some section</div>

    </div>
1 Like
5

Ahh you’re a complete lifesaver!!

I figured it out >> http://audreys-first-project-be6f23.webflow.io/

Thank you so much :slight_smile:

1 Like