Viewport Slider, React
react-viewport-slider is a react component (obviously) that displays a sequence of contents using 100% of the viewport with and height.
Usage
CommonJS
Install via NPM:
npm install react-viewport-slider Then:
import Slider from ‘react-viewport-slider’; // http://alpha.wallhaven.cc/wallpaper/164335 const wallpaper = 'http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-164335.png'; … render: function () { return ( <Slider> <Slider.Item style={{ backgroundColor: '#a2d7c7' }}> <div className="content">Hello, world.</div> </Slider.Item> <Slider.Item style={{ backgroundColor: '#353330' }}> <div className="content">Sup?</div> </Slider.Item> <Slider.Item className="has-overlay" style={{ backgroundImage: `url(${wallpaper})`, backgroundSize: 'cover' }}> <div className="content">Yo.</div> </Slider.Item> </Slider> ); } … development
npm install npm run demo npm test LICENSE
MIT: https://github.com/daviferreira/react-viewport-slider/blob/master/LICENSE
