I have created a custom page template to create a fullpage.js page with content provided by ACF. Whatever I am trying to do, I can't get fullpage.js to work on this page. This is the code for my page:

<?php /* Template Name: Landrovers story new */ ?>
<?php get_header(); ?>
<header class="header <?php if(get_field( 'header_slider' ) && count(get_field( 'header_slider' )) > 1) : ?>slide-active<?php endif; ?> <?php if(get_field( 'header_not_fullscreen' )) : ?>remove-fullscreen<?php endif; ?>">

<?php if(get_field( 'mobile_no_slider') && wp_is_mobile() || !get_field( 'header_slider' )) : ?>
    <?php get_template_part('partials/header', 'solo'); ?>
<?php else : ?>
    <?php get_template_part('partials/header', 'slider') ?>
<?php endif; ?>

</header>
<div id="fullpage">
    <div class="section" style='background-color:orange;'>Some section</div>
    <div class="section" style='background-color:white;'>Some section</div>
    <div class="section" style='background-color:blue;'>Some section</div>
    <div class="section" style='background-color:purple;'>Some section</div>
    </div>
        
<script type="text/javascript">
    new fullpage('#fullpage', {
        //options here
        autoScrolling:true,
        scrollHorizontally: true
    });
</script>
<?php get_footer(); ?>

For testing, I only created some test sections The necessary .css and .js file are added to the page by functions.php with the following function(tested and loaded on page):

function fullpagejs_scripts() {
wp_enqueue_script('fullpage_js_file', '/src/fullpage/fullpage.js', array('jquery'), '', false);
wp_enqueue_style('fullpage_css_file', get_template_directory_uri(). '/src/fullpage/fullpage.css');
}
add_action('wp_enqueue_scripts', 'fullpagejs_scripts');

The test page: https://www.the-landrovers.com/dream-defender-journey-copy/

I can't figure out how to get this workinig. Anyone have experience with implementing fullpage.js into a wordpress page template?