ReactAwesome Slider

<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.

Fold Animation

Netflix — Bojack Horseman

Open Animation Styles

For this example we're importing the open-animation style modules.

.jsx
import AwesomeSlider from 'react-awesome-slider';
import AwesomeSliderStyles from 'react-awesome-slider/src/styled/open-animation.scss';

const Slider = (
  <AwesomeSlider cssModule={AwesomeSliderStyles}>
    <div data-src="/path/to/image-0.jpg" />
    <div data-src="/path/to/image-1.jpg" />
    <div data-src="/path/to/image-2.jpg" />
    <div data-src="/path/to/image-3.jpg" />
  </AwesomeSlider>
);

Styling the open animation

The animation exit styling on the open-animation .scss file is not that straight forward but you can easily customize it using the --open CSS properties. Checkout the full style source here.

.scss
.aws-sld {
  --open-animation-perspective: 600px;
  --open-animation-angle: 8deg;
  --open-animation-enter-delay: 85ms;

  ...
}

Customisation

Basic customization through the component's props and CSS custom-properties.

Source

Component's global props

organicArrows
true
bullets
true
fillParent
false

CSS Custom Properties

General

slider-height-percentage
60%
slider-transition-duration
770ms

Arrows

organic-arrow-thickness
4px
organic-arrow-border-radius
0px
organic-arrow-height
40px
organic-arrow-color
#6a6a6a

Controls

control-button-width
10%
control-button-height
25%
control-button-background
transparent
control-bullet-color
#6a6a6a
control-bullet-active-color
#6a6a6a

Loader Bar

loader-bar-color
#851515
loader-bar-height
6px