Skip to content

Use module loaders for fullPage.js

Álvaro edited this page Sep 25, 2018 · 1 revision

Webpack

// Optional. When using fullPage extensions
//import scrollHorizontally from './fullpage.scrollHorizontally.min';

// Optional. When using scrollOverflow:true
//import IScroll from 'fullpage.js/vendors/scrolloverflow';

// Importing fullpage.js
import fullpage from 'fullpage.js';

// When using fullPage extensions replace the previous import
// of fullpage.js for this file
//import fullpage from 'fullpage.js/dist/fullpage.extensions.min';

// Initializing it
var fullPageInstance = new fullpage('#myFullpage', {
    navigation: true,
    sectionsColor:['#ff5f45', '#0798ec', '#fc6c7c', 'grey']
});

Browserify

// Optional. When using fullPage extensions
//require('./fullpage.scrollHorizontally.min');

// Optional. When using scrollOverflow:true
//require('fullpage.js/vendors/scrolloverflow');

var fullpage = require('fullpage.js');

// When using fullPage extensions replace the previos require
// of fullpage.js for this file
//var fullpage = require('fullpage.js/dist/fullpage.extensions.min');

// Initializing it
var fullPageInstance = new fullpage('#myFullpage', {
    navigation: true,
    sectionsColor:['#ff5f45', '#0798ec', '#fc6c7c', 'grey']
});

RequireJS

On your HTML file, add the following:

<!-- index.html file -->
<script src="src/require.config.js"></script>
<script data-main="src/main" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>

Then, create the following require.config.js file:

// require.config.js
var require = {
    baseUrl: ".",
    app: "./",
    paths: {
        "fullpage": "./node_modules/fullpage.js/dist/fullpage",
        "IScroll": "./node_modules/fullpage.js/vendors/scrolloverflow",
        "fullpageExtensions": "./node_modules/fullpage.js/dist/fullpage.extensions.min",

        /*
        When using any fullPage extensions you'll have to add the path to the
        extension file here
        */
        //"scrollHorizontally": "./src/fullpage.scrollHorizontally.min"
    }
};

And depending on your fullPage.js options, use one of the following defines:

// main.js
define(['fullpage'], function(fullpage) {

    // Initializing it
    var fullPageInstance = new fullpage('#myFullpage', {
        navigation: true,
        sectionsColor:['#ff5f45', '#0798ec', '#fc6c7c', 'grey']
    });
});

If you want to use the fullPage.js option scrollOverflow:true:

// main.js
define(['IScroll', 'fullpage'], function(IScroll, fullpage) {

    // Initializing it
    var fullPageInstance = new fullpage('#myFullpage', {
        navigation: true,
        sectionsColor:['blue', 'red', 'purple', 'grey'],
        scrollOverflow: true
    });
});

If you want to use any extension, like scrollHorizontally as well as scrollOverflow:true:

// main.js
define(['IScroll', 'scrollHorizontally', 'fullpageExtensions'], function(IScroll, scrollHorizontally, fullpage) {

    // Initializing it
    var fullPageInstance = new fullpage('#myFullpage', {
        navigation: true,
        sectionsColor:['blue', 'red', 'purple', 'grey'],
        scrollOverflow: true,
        scrollHorizontally: true
    });
});