Full screen scrolling with React
DEMO
import React from 'react';
import { FullPage, Slide } from 'react-full-page';
export default class FullPageExample extends React.Component {
render() {
return (
<FullPage controls>
<Slide>
<h1>Inner slide content</h1>
</Slide>
<Slide>
<h1>Another slide content</h1>
</Slide>
</FullPage>
);
}
});
Props
initialSlide
defaults to0
duration
– scroll duration [ms] defaults to700
controls
defaults tofalse
true
adds built-in controls- Pass React component if you want to use your own controls
controlsProps
additional props for controls componentbeforeChange
callback executed before scrollafterChange
callback executed after scrollscrollMode
full-page
ornormal
– defaults tofull-page
Both beforeChange
and afterChange
will receive as parameter an object like:
{ "from": 0, // the index of the slide react-full-page is scrolling _from_ "to": 1, // the index of the slide react-full-page is scrolling _to_}
Slider Controls
Basic controls props (passed automatically)
getCurrentSlideIndex: PropTypes.func.isRequired, onNext: PropTypes.func.isRequired, onPrev: PropTypes.func.isRequired, scrollToSlide: PropTypes.func.isRequired, slidesCount: PropTypes.number.isRequired,
Default controls example
<FullPage controls controlsProps={{className: 'class-name'}}> ...</FullPage>
Custom controls example
<FullPage controls={CustomControls} controlsProps={controlsProps}> ...</FullPage>