100% React Components and vanilla JS.
Demo can be found here
A larger example setup can be found here
npm install fullpage-react --save
yarn add fullpage-react
All styling can be done via inline or stylesheets. Each component from Fullpage-React requires its own block of options
You can either require this module in your own bundler/build chain or use it directly in the browser. If dropped directly into the browser, there will be a global variable named FullpageReact
const { Fullpage, Slide, HorizontalSlider } = require('fullpage-react');
const fullPageOptions = {
// for mouse/wheel events
// represents the level of force required to generate a slide change on non-mobile, 10 is default
scrollSensitivity: 7,
// for touchStart/touchEnd/mobile scrolling
// represents the level of force required to generate a slide change on mobile, 10 is default
touchSensitivity: 7,
scrollSpeed: 500,
hideScrollBars: true,
enableArrowKeys: true,
breakpoint: 375 // Disable FullpageReact and get standard scroll behavior back when this breakpoint (or below) is reached
};
const horizontalSliderProps = {
name: 'horizontalSlider1', // name is required
infinite: true, // enable infinite scrolling
};
const horizontalSlides = [
<Slide> Slide 2.1 </Slide>
<Slide> Slide 2.2 </Slide>
];
horizontalSliderProps.slides = horizontalSlides;
const slides = [
<Slide> Slide 1 </Slide>
<HorizontalSlider {...horizontalSliderProps}></HorizontalSlider>
<Slide> Slide 3 </Slide>
];
fullpageOptions.slides = slides;
<Fullpage {...fullPageOptions} />
There are two functions located on the Fullpage class. These are used for manually changing the vertical and horizontal slides via UI. An example can be found here here