Problem implementing fullpage.js code

Community resources Product feedback
1

Hi everyone!

I’m trying to use Fullpage.js for the first time and so far I’ve been following he tutorial on youtube, but I’m missing something.

I’ve paste the css code, got a div wrapper with ID fullpage and each section with its class: “section”. But I think I’m missing something with the code:

10
101220×1324 104 KB

Also, I would like my interactions to work properly and in order to do this looks like I have to use scrollBar:true but where do I have to paste this?

Thanks in advance guys!

1 Like
2

Hey @EthanSuero

Maybe you can find more info here > Fullpage.js Lets solve this once and for all together! - #12 by Siton_Systems

Piter :webflow_heart:

3

Hey @PeterDimitrov thanks for your quick answer!

That’s cool to fix the interactions issue, but still the full page scroll does not work for some reason. This is what I’ve got:

29
291270×1702 254 KB

Then on webflow I’ve got a Div with ID fullpage wrapping 5 sections, each section has a class “section” but I also applied to these different combo classes, is that a problem? The fullpage scrolling is not working at all atm.

Thanks !

1 Like
4

You can check > https://webflow.com/website/Full-Page-js-speed

The structure is similar. I have a div wrapping all sections. The div has an id #fullpage. The sections have a custom attribute data-anchor=“p1” . So, if I have five sections they will have custom attributes from 1 to 5. You can see the anchors in the body code.

Code I’m using:

Head
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.css">

Body

<script> $(document).ready(function() { $('#fullpage').fullpage({
    
    responsiveWidth: 900,
    verticalCentered: true,
    navigation: false,
   
        }); 
});

</script>

<script>$('#fullpage').fullpage({
	anchors: ['p1', 'p2', 'p3', 'p4', 'p5'],
	menu: '#myMenu'
  
              responsiveWidth: 720,
              scrollingSpeed: 1,
              
              //Scrolling
              css3: true,
              autoScrolling: true,
              fitToSection: true,
              fitToSectionDelay: false,
              scrollBar: true,
              easing: 'easeInOutCubic',
              easingcss3: 'ease',
              animateAnchor: true,
              loopBottom: true,
              loopTop: false,
              loopHorizontal: true,
              continuousVertical: true,
              continuousHorizontal: false,
              scrollHorizontally: false,
              interlockedSlides: false,
              resetSliders: false,
              fadingEffect: true,
              normalScrollElements: '#somesectionsID',
              scrollOverflow: false,
              scrollOverflowOptions: true,
              touchSensitivity: 5,
              normalScrollElementTouchThreshold: 15,
              bigSectionsDestination: null,
              
              /*My additions below this point*/      
           
              showActiveTooltip: true,
           
         
                });
        });
</script>

<!-- The script bellow controls the speed -->

<script>
$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
    var idx = Math.abs(index - nextIndex)*.250;
    $.fn.fullpage.setScrollingSpeed(idx*5000);
    }
})
</script>
5

Ah so I have the code the other way around?

Regarding the anchor, is this a class called “p1” or the ID you give to this particular section from 1 to x ?

6

My advice. First try to learn full.js by codepen (More visual + auto refresh)

Example (Or google it):

Its hard to modify options by webflow (Because each time you need to push to live). Sometimes missing “,” will break the code (So its better first to create 100% working codepen example).

Use absolute paths:

This is broken path: src="fullpage.js

src="fullpage.js"  /* change to src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.js" */

Same idea for CSS:

"href="fullpage.css" /*change to href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.css" */

Also follow this workshop:
https://webflow.com/workshop/adding-fullpage-js-into-your-webflow-project

7

Not class and not ID - you should add custom attribute data-anchor

image

anchors: ['slide-1', /*...rest of the code

full.js anchor docs:

https://github.com/alvarotrigo/fullPage.js/#creating-links-to-sections-or-slides

1 Like
9

Done!

I managed to get it work by replying the site from Piter, for some reason when pasting the code something was wrong, now is working great even with interactions.

However, on devices such tablet or mobile interactions are not working right and also the section is not taking the whole screen, is cutted a bit on the bottom. On desktop is working great!

Thanks guys!

1 Like