React Awesome Slider Carousel with Autoplay
<AwesomeSlider/>~7KB compressed
React Awesome Slider is a 60fps, extendable, highly customisable, production ready javascript react component that renders an animated set of UI gallery sliders.
Basic Usage
Installation
.sh
npm install --save react-awesome-slider
Basic Image Example
.jsx
import AwesomeSlider from 'react-awesome-slider'; import AwsSliderStyles from 'react-awesome-slider/src/styles.scss'; const slider = ( <AwesomeSlider cssModule={styles}> <div data-src="/path/to/image-0.png" /> <div data-src="/path/to/image-1.png" /> <div data-src="/path/to/image-2.jpg" /> </AwesomeSlider> );
Startup Screen
The startupScreen prop defines the first screen that's rendered when the component mounts, it works like a pre-load screen. If not defined the component will default to the first child screen or to the screen defined on the selected prop.
.jsx
import AwesomeSlider from 'react-awesome-slider'; import AwsSliderStyles from 'react-awesome-slider/src/styles.scss'; const startupScreen = ( <div> <img src="/path/to/image-loader.png" /> </div> ); const slider = ( <AwesomeSlider startupScreen={startupScreen} cssModule={styles} > /* ... */ </AwesomeSlider> );
Animation hooks
The three main hooks are onFirstMount, onAnimationStart and onAnimationEnd. They're called with an object containing the component main element, currentIndex, nextIndex, currentScreen and nextScreen
.jsx
const onAnimationStart = ({ element, currentIndex, nextIndex, currentScreen, nextScreen, }) => { /* ... do Something */ } /* ... */ const slider = ( <AwesomeSlider cssModule={styles} onFirstMount={onFirstMount} onAnimationStart={onAnimationStart} onAnimationEnd={onAnimationEnd} > <div data-src="/path/to/image-0.png" /> <div data-src="/path/to/image-1.png" /> <div data-src="/path/to/image-2.jpg" /> </AwesomeSlider> );
Customisation
Basic customization through the component's props and CSS custom-properties.
Component's global props
- true
- true
- false