Skip to content
React Slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders.
JavaScript CSS
Branch: master
Clone or download
Latest commit d1cc53b Oct 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist fix demo hook issue Oct 8, 2019
src fix hoc src path Oct 17, 2019
.babelrc initial structure Jan 17, 2018
.eslintrc.json implemented new animations and refactored demo strategy Oct 6, 2019
.gitignore add npmignore May 29, 2019
.postcssrc.json implement new demo version Apr 19, 2018
.prettierrc feature review May 16, 2019
.travis.yml update travis Jun 24, 2019
LICENSE initial structure Jan 17, 2018
README.md Update README.md Oct 17, 2019
package.json 2.0.1 Oct 17, 2019
scss-builder.js add styled folder structure, fix examples Oct 8, 2019
webpack.animations.config.js
webpack.config.js fix demo hook issue Oct 8, 2019
webpack.demo.config.js demo review Oct 7, 2019
webpack.scss.config.js add styled folder structure, fix examples Oct 8, 2019
webpack.server.config.js fix demo hook issue Oct 8, 2019
webpack.website.config.js fix demo hook issue Oct 8, 2019
yarn.lock fix demo hook issue Oct 8, 2019

README.md

React Awesome Slider v2 [New Transitions]

Travis NPM

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

Basic usage

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

Animation recipes: scale-out, fold-out, cube, open and fall.

For analysing how the animations are built, please check out to this folder. Collaborations with new creative ones are welcome, just open a PR.

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

Touch enabled

react-awesome-slider demo

Live demo

Checkout the CSS customizer at my portfolio

Figma File

Import the component directly into your Figma project.

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>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </AwesomeSlider>
);

Basic usage with CSS Modules

import AwesomeSlider from 'react-awesome-slider';
import AwesomeSliderStyles from 'react-awesome-slider/src/styles';

const slider = (
  <AwesomeSlider cssModule={AwesomeSliderStyles}>
    <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>
);

Fold-out animation recipe with CSS Modules

Checkout more recipes on the styled folder. For more animation recipes check out the styled folder.

import AwesomeSlider from 'react-awesome-slider';
import AwesomeSliderStyles from 'react-awesome-slider/src/styled/fold-out-animation';

const slider = (
  <AwesomeSlider cssModule={AwesomeSliderStyles}>
    <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>
);

Cube animation recipe with CSS Modules

Checkout more recipes on the styled folder. For more animation recipes check out the styled folder.

import AwesomeSlider from 'react-awesome-slider';
import AwesomeSliderStyles from 'react-awesome-slider/src/styled/cube-animation';

const slider = (
  <AwesomeSlider cssModule={AwesomeSliderStyles}>
    <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
  • FullScreen achieved through the fillParent prop

Main Props

Attributes Type Default Description
className string null Add a className to the component container
cssModule object null CSS Module object if you choose to use this styling approach
name string awesome-slider Unique name of the rendered slider. Useful if you're navigating between multiple pages that contains a slider component.
className string null Adds a classname to the awesome slider container
selected number 0 Sets the current active/selected screen
bullets boolean true When set to true show the bullet controls underneath the slider
organicArrows boolean true When set to true show the organic arrow next and prev controls
fillParent boolean false When set to true the slider will fill the dimensions of the parent element. Usefull for using it in full-screen mode.
infinite boolean true When set to true the slider will behave on an infinite fashion returing to the first slide after the last one.
startupScreen node null Set's the startup screen component to be shown before the first screen is loaded. It works like a pre-loading screen.
startup boolean true Used together with startupScreen controls weather or not the startupScreen should auto-start.
transitionDelay number 0 Sets a delay in ms between the slide transitions. Useful if you're waiting for an exit animation to finish in the current slide.
onFirstMount function null Called on componentDidMount passing the slider reference as an argument
onTransitionEnd function null Called on at the slider transition end event passing the slider reference as an argument
onTransitionStart function null Called on slider transition start passing the slider reference as an argument
onTransitionRequest function null Called when a user interacts with the slider navigation (arrows or bullets)

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.

Author

Rafael Caferati

License

MIT. Copyright (c) 2018 Rafael Caferati.

You can’t perform that action at this time.