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

Checkout the CSS customizer at my portfolio

Import the component directly into your Figma project.

npm install --save react-awesome-slider

or

yarn add react-awesome-slider

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>
);

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

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>
);

• 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

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.

• Checkout my Full-Stack Web Developer Website
• Other open source projects @ Code Laboratory
• A scope of my work @ Web Portfolio

MIT. Copyright (c) 2018 Rafael Caferati.