React <AwesomeSlider />
react-awesome-slider is a 60fps, extendable, highly customisable, production ready React Component that renders a media (image/video) gallery slider/carousel.
Basic usage
Scale-out and Fold-out animation recipes
Touch enabled
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 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> );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
fillParentprop
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 | Runs on componentDidMount passing the slider reference as an argument |
| onTransitionEnd | function | null | Runs on at the slider transition end event passing the slider reference as an argument |
| onTransitionStart | function | null | Runs on slider transition start passing the slider reference as an argument |
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
- Checkout my Full-Stack Web Developer Website
- Other open source projects @ Code Laboratory
- A scope of my work @ Web Portfolio
License
MIT. Copyright (c) 2018 Rafael Caferati.
