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.

Scale Animation

Comedy Central — South Park

Scale Animation Styles

For this example we're importing the scale-out-animation overwritten style modules.

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

How to extend it

The animation exit styling on the scale-out-animation .scss file is pretty straight forward. We just apply the scaling down on exit moveLeft and exit moveRight classes of the active box container.

.scss
.aws-sld {
  &--exit {
    &.aws-sld--moveRight, &.aws-sld--moveLeft {
      animation: scaleOut var(--slider-transition-duration) both
        var(--transition-bezier);
    }
  }
}

@keyframes scaleOut {
  to {
    transform: scale(0.85);
  }
}

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
670ms

Arrows

organic-arrow-thickness
6px
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