I am trying to use fullpage.js in an express project with Pug as the template language. However, the website shows all messed up with fullpage.js working but not doing its normal function and all the sections are mixed together.
I have this in layout.pug
doctype html
html
head
title Hello
block indStyles
body
block content
script(src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js' integrity='sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz' crossorigin='anonymous')
script(src='https://unpkg.com/[email protected]/dist/aos.js')
block indScripts
& this in home.pug
extends layout
block indStyles
link(rel='stylesheet' href='/stylesheets/home-styles.css')
block content
#fullpagehome
.section
h1 Hello
.section
h1 Great
block indScripts
script(src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.22/fullpage.min.js' integrity='sha512-yHHLi2ZwgtW9QNVZd0asqMyWGJ6Kx73ijKlGWSi3MwYFB5ZzOJV8wPtopKr6muHk5SERgF3OB/2dZj3StlI34w==' crossorigin='anonymous' referrerpolicy='no-referrer')
script(src='/javascripts/fullpagehome.js')
& this in fullpagehome.js
new fullpage('#fullpagehome', {
loopTop: true,
loopBottom: true,
autoScrolling:true,
});
This is the result I have instead of the scroll-able fullpage.js style
Using the same code but in HTML, I get the correct fullpage.js style
I have tried a lot of options like including the fullpage sections in the layout file & searched around if there is something missing in the javascript file but no still. I also thought maybe because Express & Pug utilize SSR it maybe does something wrong however, I didn’t find any info about that & tried to load the fullpage.js function after page fully rendered using document.readyState == 'complete'
& still nothing.
Thanks in advance for taking the time to maybe help me & I need this to work