0.1.12 • Published 3 years ago
react-full-page v0.1.12
react-full-page
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>
0.1.12
3 years ago
0.1.11
4 years ago
0.1.10
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
8 years ago
0.0.2
9 years ago
0.0.1
9 years ago