fullpage-react's Introduction

Fullpage-React

100% React Components and vanilla JS.

Demo can be found here

A larger example setup can be found here

Basic Setup

NPM

npm install fullpage-react --save

Yarn

yarn add fullpage-react

All styling can be done via inline or stylesheets. Each component from Fullpage-React requires its own block of options

Built for UMD

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

Component Option Boilerplate

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} />

Events

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

Recommend Projects