Gathering detailed insights and metrics for react-awesome-slider
Gathering detailed insights and metrics for react-awesome-slider
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
Installations
npm install react-awesome-sliderDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
8.16.0
NPM Version
6.4.1
Score
85.3
Supply Chain
98.4
Quality
75.8
Maintenance
100
Vulnerability
100
License
Releases
10
Languages
2
JavaScript
CSS
JavaScript (74.69%)
CSS (25.31%)
Developer
Download Statistics
Total Downloads
1,981,108
Last Day
1,241
Last Week
6,106
Last Month
25,822
Last Year
373,845
GitHub Statistics
MIT License
2,954 Stars
302 Commits
295 Forks
34 Watchers
50 Branches
6 Contributors
Updated on May 01, 2025
Bundle Size
36.20 kB
Minified
8.14 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
4.1.0
Package Id
react-awesome-slider@4.1.0
Size
206.15 kB
NPM Version
6.4.1
Node Version
8.16.0
Published on
Feb 21, 2020
Total Downloads
Cumulative downloads
Total Downloads
1,981,108
Last Day
-8.1%
1,241
Compared to previous day
Last Week
9.7%
6,106
Compared to previous week
Last Month
-5.7%
25,822
Compared to previous month
Last Year
-16.8%
373,845
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
44
@babel/cli@babel/core@babel/helper-plugin-utils@babel/node@babel/plugin-proposal-class-properties@babel/preset-env@babel/preset-react@babel/registerautoprefixerbabel-corebabel-eslintbabel-jestbabel-loaderbabel-plugin-transform-react-remove-prop-typescss-loaderenzymeenzyme-adapter-react-16eslinteslint-config-airbnbeslint-config-prettiereslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reactjestmini-css-extract-pluginnode-sassoptimize-css-assets-webpack-pluginpostcss-loaderprismjsprop-typesreactreact-awesome-buttonreact-domreact-routerreact-router-domreact-test-rendererregenerator-runtimesass-loadershelljsstrip-ansistyle-loaderwebpackwebpack-cliwebpack-dev-server
React Awesome Slider v3 [NEW fullpage navigation HOC]
react-awesome-slider is a 60fps, extendable, highly customizable, production ready React Component that renders a media (image/video) gallery slider/carousel.
FULLPAGE navigation HOC
For using the full-screen navigation HOCs please checkout the GatsbyJS and NextJS examples on the ras fullpage strategies repository.
You can access the demo for the FULLPAGE navigation here: fullpage.caferati.me
Basic usage
Basic usage with pure CSS
1import AwesomeSlider from 'react-awesome-slider'; 2import 'react-awesome-slider/dist/styles.css'; 3 4const slider = ( 5 <AwesomeSlider> 6 <div>1</div> 7 <div>2</div> 8 <div>3</div> 9 <div>4</div> 10 </AwesomeSlider> 11);
Animation recipes: scale-out, fold-out, cube, open and fall.
For analysing how the animations are built, please check out to this folder. Collaborations with new creative ones are welcome, just open a PR.
Cube animation recipe
Checkout more recipes on the styled folder. For more animation recipes check out the styled folder.
1import AwesomeSlider from 'react-awesome-slider'; 2import 'react-awesome-slider/dist/custom-animations/cube-animation.css'; 3 4const slider = ( 5 <AwesomeSlider animation="cubeAnimation"> 6 <div data-src="/path/to/image-0.png" /> 7 <div data-src="/path/to/image-1.png" /> 8 <div data-src="/path/to/image-2.jpg" /> 9 </AwesomeSlider> 10);
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
More Examples
Basic usage with Media object
1import AwesomeSlider from 'react-awesome-slider'; 2import 'react-awesome-slider/dist/styles.css'; 3 4const slider = ( 5 <AwesomeSlider 6 media={[ 7 { 8 source: '/path/to/image-0.png', 9 }, 10 { 11 source: '/path/to/image-1.png', 12 }, 13 { 14 source: '/path/to/image-2.png', 15 }, 16 ]} 17 /> 18);
Basic usage with CSS Modules
1import AwesomeSlider from 'react-awesome-slider'; 2import AwesomeSliderStyles from 'react-awesome-slider/src/styles'; 3 4const slider = ( 5 <AwesomeSlider cssModule={AwesomeSliderStyles}> 6 <div data-src="/path/to/image-0.png" /> 7 <div data-src="/path/to/image-1.png" /> 8 <div data-src="/path/to/image-2.jpg" /> 9 </AwesomeSlider> 10);
Fold-out animation recipe with CSS Modules
Checkout more recipes on the styled folder. For more animation recipes check out the styled folder.
Note that on v3 there's an adition of the animation prop. The animation name is the cammel-cased version of the animation css file.
1import AwesomeSlider from 'react-awesome-slider'; 2import CoreStyles from 'react-awesome-slider/src/core/styles.scss'; 3import AnimationStyles from 'react-awesome-slider/src/styled/fold-out-animation/fold-out-animation.scss'; 4 5const slider = ( 6 <AwesomeSlider 7 animation="foldOutAnimation" 8 cssModule={[coreStyles, animationStyles]} 9 > 10 <div data-src="/path/to/image-0.png" /> 11 <div data-src="/path/to/image-1.png" /> 12 <div data-src="/path/to/image-2.jpg" /> 13 </AwesomeSlider> 14);
Using the Autoplay HOC with plain CSS
1import AwesomeSlider from 'react-awesome-slider'; 2import withAutoplay from 'react-awesome-slider/dist/autoplay'; 3import 'react-awesome-slider/dist/styles.css'; 4 5const AutoplaySlider = withAutoplay(AwesomeSlider); 6 7const slider = ( 8 <AutoplaySlider 9 play={true} 10 cancelOnInteraction={false} // should stop playing on user interaction 11 interval={6000} 12 > 13 <div data-src="/path/to/image-0.png" /> 14 <div data-src="/path/to/image-1.png" /> 15 <div data-src="/path/to/image-2.jpg" /> 16 </AutoplaySlider> 17);
Using the Captioned HOC with plain CSS
1import AwesomeSlider from 'react-awesome-slider'; 2import withCaption from 'react-awesome-slider/dist/captioned'; 3import 'react-awesome-slider/dist/styles.css'; 4import 'react-awesome-slider/dist/captioned.css'; 5 6const CaptionedSlider = withCaption(AwesomeSlider); 7 8const component = ( 9 <CaptionedSlider 10 startupScreen={StartupScreen} 11 cssModule={CaptionedStyles} 12 screens={[ 13 { 14 backgroundColor: '#4a9c8c', 15 media: '/images/series/ricknmorty-3.png', 16 caption: 'I want to see what you got.', 17 }, 18 { 19 backgroundColor: '#4a9c8c', 20 media: '/images/series/ricknmorty-3.png', 21 caption: "The answer is -- Don't think about it.", 22 }, 23 ]} 24 /> 25);
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. |
| 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 whether 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. |
| mobileTouch | boolean | true | When set to true activates a swipe touch effect to navigate on mobile devices. |
| buttons | boolean | true | Should render the default left and right navigation buttons. |
| buttonContentRight | node | null | Add content as children of the right button. |
| buttonContentLeft | node | null | Add content as children of the left button. |
| customContent | node | null | Render extra content at the same level of the default buttons. Useful if you want to add an extra slider navigation layer or a fixed overlay element |
| onFirstMount | function | null | Called on componentDidMount passing the slider reference as an argument |
| onTransitionEnd | function | null | Called on at the slider transition end event passing the slider reference as an argument |
| onTransitionStart | function | null | Called on slider transition start passing the slider reference as an argument |
| onTransitionRequest | function | null | Called when a user interacts with the slider navigation (arrows or bullets) |
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 Web Developer Portfolio Website
- Other open source projects @ Code Laboratory
- A scope of my work @ Web Developer Portfolio
License
MIT. Copyright (c) 2018 Rafael Caferati.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 2/15 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 22 are checked with a SAST tool
Reason
118 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Score
1.9
/10
Last Scanned on 2025-05-05
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More