# React Awesome Slider v3 [NEW fullpage navigation HOC] [![Travis](https://img.shields.io/travis/rcaferati/react-awesome-slider/master.svg)](https://travis-ci.org/rcaferati/react-awesome-slider) ![NPM](https://img.shields.io/npm/v/react-awesome-slider.svg) `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](https://github.com/rcaferati/ras-fullpage-strategies). You can access the demo for the FULLPAGE navigation here: [fullpage.caferati.me](https://fullpage.caferati.me) [ react-awesome-slider demo

](https://fullpage.caferati.me/) ## Basic usage [ react-awesome-slider demo

](https://caferati.me/demo/react-awesome-slider) [ react-awesome-slider demo

](https://caferati.me/demo/react-awesome-slider) ### Basic usage with pure CSS ```jsx import AwesomeSlider from 'react-awesome-slider'; import 'react-awesome-slider/dist/styles.css'; const slider = (

); ``` ## Animation recipes: scale-out, fold-out, cube, open and fall. For analysing how the animations are built, please check out to [this folder](https://github.com/rcaferati/react-awesome-slider/tree/master/src/styled). Collaborations with new creative ones are welcome, just open a PR. [ react-awesome-slider demo

](https://caferati.me/demo/react-awesome-slider) [ react-awesome-slider demo

](https://caferati.me/demo/react-awesome-slider) ### Cube animation recipe Checkout more recipes on the styled folder. For more animation recipes check out the [styled folder](https://github.com/rcaferati/react-awesome-slider/tree/master/src/styled). ```jsx import AwesomeSlider from 'react-awesome-slider'; import 'react-awesome-slider/dist/custom-animations/cube-animation.css'; const slider = (

); ``` ### Touch enabled [ react-awesome-slider demo

](https://caferati.me/demo/react-awesome-slider) ## Live demo Checkout the `CSS customizer` at my portfolio [

](https://caferati.me/demo/react-awesome-slider) ## Figma File Import the component directly into your [Figma](https://www.figma.com/file/VItcmlJtKZxyGJhClk4Lg0kQ/react-awesome-slider) project. [

](https://www.figma.com/file/VItcmlJtKZxyGJhClk4Lg0kQ/react-awesome-slider) ### Installing ``` npm install --save react-awesome-slider ``` or ``` yarn add react-awesome-slider ``` ## More Examples ### Basic usage with Media object ```jsx import AwesomeSlider from 'react-awesome-slider'; import 'react-awesome-slider/dist/styles.css'; const slider = ( ); ``` ### Basic usage with CSS Modules ```jsx import AwesomeSlider from 'react-awesome-slider'; import AwesomeSliderStyles from 'react-awesome-slider/src/styles'; const slider = (

); ``` ### Fold-out animation recipe with CSS Modules Checkout more recipes on the styled folder. For more animation recipes check out the [styled folder](https://github.com/rcaferati/react-awesome-slider/tree/master/src/styled). 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. ```jsx import AwesomeSlider from 'react-awesome-slider'; import CoreStyles from 'react-awesome-slider/src/core/styles.scss'; import AnimationStyles from 'react-awesome-slider/src/styled/fold-out-animation/fold-out-animation.scss'; const slider = (

); ``` ### Using the Autoplay HOC with plain CSS ```jsx import AwesomeSlider from 'react-awesome-slider'; import withAutoplay from 'react-awesome-slider/dist/autoplay'; import 'react-awesome-slider/dist/styles.css'; const AutoplaySlider = withAutoplay(AwesomeSlider); const slider = (

	Stars	Issues	Version	Updated	Created
@egjs/react-flicking			4.11.4	2 months ago	6 years ago
keen-slider	4,655	132	6.8.6	a year ago	4 years ago
react-awesome-slider	2,927	77	4.1.0	5 years ago	6 years ago
react-image-magnify	643	118	2.7.4	6 years ago	8 years ago

@egjs/react-flicking vs keen-slider vs react-awesome-slider vs react-image-magnify

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past