React Awesome Slider Image Carousel Component

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> );