-
Notifications
You must be signed in to change notification settings - Fork 7.3k
Use module loaders for fullPage.js
Álvaro edited this page Sep 25, 2018
·
1 revision
// 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
});
});