React Awesome Slider Image Carousel Component

<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

Netflix — Bojack Horseman

bojack

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.

Source

Component's global props

    • true
    • true
    • false

CSS Custom Properties

    General

    Arrows

    Controls

    Loader Bar

Avatar