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.

Cube Animation

Adult Swim — Rick and Morty

Cube Animation Styles

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

.jsx
import AwesomeSlider from 'react-awesome-slider';
import AwesomeSliderStyles from 'react-awesome-slider/src/styled/cube-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 cube animation

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

.scss
.aws-sld {
  --cube-animation-duration: 675ms;
  --cube-animation-perspective: 1800px;
  --cube-animation-ease-in: cubic-bezier(0.8, 0, 1, 0.8);
  --cube-animation-ease-out: cubic-bezier(0, 0.2, 0.2, 1);
  --cube-translateZ-distance: -225px;

  ...
}

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