carousel

React Component that renders a media gallery slider/carousel

May 31, 2019
React Component that renders a media gallery slider/carousel

React AwesomeSlider

react-awesome-slider is a 60fps, extendable, highly customisable, production ready React Component that renders a media (image/video) gallery slider/carousel.

View demo Download Source

Basic usage

react-awesome-slider demo
react-awesome-slider demo

Scale-out and Fold-out animation recipes

react-awesome-slider demo
react-awesome-slider demo

Touch enabled

react-awesome-slider demo

Live demo

Installing

npm install --save react-awesome-slider

or

yarn add react-awesome-slider

Examples

Basic usage with and plain CSS

import AwesomeSlider from 'react-awesome-slider'; import 'react-awesome-slider/dist/styles.css'; const slider = ( <AwesomeSlider> <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> );

Basic usage with CSS Modules

import AwesomeSlider from 'react-awesome-slider'; import AwsSliderStyles from 'react-awesome-slider/src/styles.scss'; const slider = ( <AwesomeSlider cssModule={AwsSliderStyles}> <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> );

Key Features

  • Look and feel customisable and extendable via SASS and CSS Variables (custom-properties) (scss main file)
  • Media pre-loader
  • Touch enabled
  • 60fps animations
  • Animated transition recipes
  • Extendable via custom plugin HOC components

Main Props

AttributesTypeDefaultDescription
classNamestringnullAdd a className to the component container
cssModuleobjectnullCSS Module object if you choose to use this styling approach
namestringawesome-sliderUnique name of the rendered slider. Useful if you're navigating between multiple pages that contains a slider component.
selectednumber0Sets the current active/selected screen
bulletsbooleantrueWhen set to true show the bullet controls underneath the slider
organicArrowsbooleantrueWhen set to true show the organic arrow next and prev controls
fillParentbooleanfalseWhen set to true the slider will fill the dimensions of the parent element. Usefull for using it in full-screen mode.
transitionDelaynumber0Sets a delay in ms between the slide transitions. Useful if you're waiting for an exit animation to finish in the current slide.
startupScreennodenullSet's the startup screen element to be shown before the first screen is loaded
onFirstMountfunctionnullRuns on componentDidMount passing the slider reference as an argument
onTransitionEndfunctionnullRuns on at the slider transition end event passing the slider reference as an argument
onTransitionStartfunctionnullRuns on slider transition start passing the slider reference as an argument

Contribute

If you have an idea for a missing feature or animation just craft your own hoc feature or animation style and send it up via PR to the src/components folder.

GitHub

Recommended