Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/alvarotrigo/fullPage.js/wiki/Use-module-loaders-for-fullPage.js below:

Use module loaders for fullPage.js · alvarotrigo/fullPage.js Wiki · GitHub

// 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']
});

// 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']
});

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
    });
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4