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. 🖥️ 📱

2,952

296

2,952

View on GitHub View on NPM

Top Related Projects

swiper

41,869

Most modern mobile touch slider with hardware accelerated transitions

slick

28,571

the last carousel you'll ever need

react-slick

11,924

React carousel component

nuka-carousel

3,103

Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.

react-responsive-carousel

2,676

React.js Responsive Carousel (with Swipe)

react-id-swiper

1,482

A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build

Quick Overview

React Awesome Slider is a feature-rich, customizable slider/carousel component for React applications. It offers smooth transitions, touch swipe support, and various animation effects, making it ideal for creating engaging image galleries, product showcases, or fullscreen presentations.

Pros

Highly customizable with numerous built-in transitions and animation effects
Responsive design with support for mobile devices and touch gestures
Supports media preloading for smoother user experience
Extensible architecture allowing for custom plugins and components

Cons

Learning curve may be steeper compared to simpler slider libraries
Large bundle size due to extensive features, which may impact load times
Limited documentation for advanced customization scenarios
Some users report occasional performance issues with complex setups

Code Examples

Basic usage with images:

import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';

const slider = (
  <AwesomeSlider>
    <div data-src="/path/to/image-0.jpg" />
    <div data-src="/path/to/image-1.jpg" />
    <div data-src="/path/to/image-2.jpg" />
  </AwesomeSlider>
);

Using custom animation and autoplay:

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 = (
  <AutoplaySlider
    play={true}
    cancelOnInteraction={false}
    interval={6000}
    animation="cubeAnimation"
  >
    <div data-src="/path/to/image-0.jpg" />
    <div data-src="/path/to/image-1.jpg" />
    <div data-src="/path/to/image-2.jpg" />
  </AutoplaySlider>
);

Adding custom content and navigation:

import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';

const slider = (
  <AwesomeSlider
    bullets={false}
    organicArrows={true}
    infinite={false}
  >
    <div>
      <h1>Slide 1</h1>
      <p>Custom content here</p>
    </div>
    <div>
      <h1>Slide 2</h1>
      <p>More custom content</p>
    </div>
  </AwesomeSlider>
);

Getting Started

Install the package:
```
npm install react-awesome-slider
```

Import the component and styles in your React application:

import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';

Use the component in your JSX:

function MyComponent() {
  return (
    <AwesomeSlider>
      <div>Slide 1 content</div>
      <div>Slide 2 content</div>
      <div>Slide 3 content</div>
    </AwesomeSlider>
  );
}

Competitor Comparisons

swiper

41,869

Most modern mobile touch slider with hardware accelerated transitions

Pros of Swiper

More comprehensive and feature-rich, offering a wider range of slider types and options
Better cross-platform compatibility, including support for mobile touch events
Larger community and more frequent updates, ensuring better long-term support

Cons of Swiper

Steeper learning curve due to its extensive feature set
Larger file size, which may impact page load times
Less focused on React-specific implementation, requiring additional setup for React projects

Code Comparison

React Awesome Slider:

import AwesomeSlider from 'react-awesome-slider';

<AwesomeSlider>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</AwesomeSlider>

Swiper:

import { Swiper, SwiperSlide } from 'swiper/react';

<Swiper>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

Both libraries offer simple implementation, but Swiper requires additional import of styles and modules for advanced features. React Awesome Slider provides a more straightforward setup for basic React projects, while Swiper offers greater flexibility and customization options at the cost of slightly more complex configuration.

slick

28,571

the last carousel you'll ever need

Pros of Slick

More mature and widely adopted, with a larger community and ecosystem
Supports a broader range of browsers, including older versions
Offers more customization options and features out of the box

Cons of Slick

Relies on jQuery, which may not be ideal for modern React applications
Larger bundle size due to additional dependencies
Less optimized for performance compared to React Awesome Slider

Code Comparison

Slick:

$('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1
});

React Awesome Slider:

import AwesomeSlider from 'react-awesome-slider';

<AwesomeSlider>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</AwesomeSlider>

Summary

Slick is a more established and feature-rich slider library with broader browser support, but it comes with the overhead of jQuery dependency. React Awesome Slider is a modern, React-specific solution that offers better performance and a smaller bundle size, making it more suitable for React-based projects. The choice between the two depends on project requirements, target browsers, and whether jQuery is already part of the tech stack.

react-slick

11,924

React carousel component

Pros of react-slick

More mature and widely adopted, with a larger community and ecosystem
Offers a wider range of customization options and features
Better documentation and examples available

Cons of react-slick

Larger bundle size due to its extensive feature set
May require more setup and configuration for basic use cases
Performance can be slower for complex slideshows with many elements

Code Comparison

react-slick:

import Slider from "react-slick";

<Slider dots={true} infinite={true} speed={500} slidesToShow={1} slidesToScroll={1}>
  <div><img src="image1.jpg" alt="Slide 1" /></div>
  <div><img src="image2.jpg" alt="Slide 2" /></div>
</Slider>

react-awesome-slider:

import AwesomeSlider from 'react-awesome-slider';

<AwesomeSlider>
  <div data-src="image1.jpg" />
  <div data-src="image2.jpg" />
</AwesomeSlider>

Both libraries offer easy-to-use components for creating image sliders. react-slick provides more granular control over slider behavior, while react-awesome-slider focuses on simplicity and performance. The choice between the two depends on the specific requirements of your project, such as the need for advanced features, performance considerations, and desired level of customization.

nuka-carousel

3,103

Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.

Pros of Nuka Carousel

More customizable with a wide range of props and options
Better support for responsive design and mobile devices
Extensive documentation and examples

Cons of Nuka Carousel

Less visually appealing out-of-the-box compared to React Awesome Slider
Requires more setup and configuration for advanced features
Smaller community and fewer third-party extensions

Code Comparison

React Awesome Slider:

import AwesomeSlider from 'react-awesome-slider';

<AwesomeSlider>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</AwesomeSlider>

Nuka Carousel:

import Carousel from 'nuka-carousel';

<Carousel>
  <img src="image1.jpg" alt="Slide 1" />
  <img src="image2.jpg" alt="Slide 2" />
  <img src="image3.jpg" alt="Slide 3" />
</Carousel>

Both libraries offer simple implementation, but Nuka Carousel provides more flexibility in terms of content types and customization options. React Awesome Slider focuses on pre-designed, visually appealing transitions, while Nuka Carousel allows for more granular control over carousel behavior and appearance.

react-responsive-carousel

2,676

React.js Responsive Carousel (with Swipe)

Pros of react-responsive-carousel

More customizable with a wider range of options and settings
Better documentation and examples for easier implementation
Higher number of downloads and larger community support

Cons of react-responsive-carousel

Less modern design and animations out of the box
Slightly larger bundle size, which may impact performance

Code Comparison

react-responsive-carousel:

import { Carousel } from 'react-responsive-carousel';

<Carousel showArrows={true} infiniteLoop={true} autoPlay={true}>
  <div><img src="image1.jpg" alt="Image 1" /></div>
  <div><img src="image2.jpg" alt="Image 2" /></div>
</Carousel>

react-awesome-slider:

import AwesomeSlider from 'react-awesome-slider';

<AwesomeSlider>
  <div data-src="image1.jpg" />
  <div data-src="image2.jpg" />
</AwesomeSlider>

Both libraries offer similar basic functionality for creating image carousels in React applications. react-responsive-carousel provides more customization options and has a larger user base, while react-awesome-slider offers a more modern look with smoother animations out of the box. The choice between the two depends on specific project requirements and design preferences.

react-id-swiper

1,482

A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build

Pros of react-id-swiper

Built on top of Swiper.js, providing a wide range of features and customization options
Extensive documentation and examples for various use cases
Supports both React and React Native

Cons of react-id-swiper

Larger bundle size due to Swiper.js dependency
May have a steeper learning curve for developers unfamiliar with Swiper.js
Less focus on performance optimization compared to react-awesome-slider

Code Comparison

react-id-swiper:

import Swiper from 'react-id-swiper';

const SimpleSwiper = () => (
  <Swiper>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
  </Swiper>
);

react-awesome-slider:

import AwesomeSlider from 'react-awesome-slider';

const SimpleSlider = () => (
  <AwesomeSlider>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
  </AwesomeSlider>
);

Both libraries offer similar basic usage, but react-id-swiper provides more advanced configuration options through Swiper.js, while react-awesome-slider focuses on simplicity and performance. The choice between the two depends on specific project requirements and developer preferences.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React Awesome Slider v3 [NEW fullpage navigation HOC]

NPM

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

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

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.

import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/custom-animations/cube-animation.css';

const slider = (
  <AwesomeSlider animation="cubeAnimation">
    <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>
);

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

yarn add react-awesome-slider

More Examples

Basic usage with Media object

import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';

const slider = (
  <AwesomeSlider
    media={[
      {
        source: '/path/to/image-0.png',
      },
      {
        source: '/path/to/image-1.png',
      },
      {
        source: '/path/to/image-2.png',
      },
    ]}
  />
);

Basic usage with CSS Modules

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

const slider = (
  <AwesomeSlider cssModule={AwesomeSliderStyles}>
    <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>
);

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.

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 = (
  <AwesomeSlider
    animation="foldOutAnimation"
    cssModule={[coreStyles, animationStyles]}
  >
    <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>
);

Using the Autoplay HOC with plain CSS

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 = (
  <AutoplaySlider
    play={true}
    cancelOnInteraction={false} // should stop playing on user interaction
    interval={6000}
  >
    <div data-src="/path/to/image-0.png" />
    <div data-src="/path/to/image-1.png" />
    <div data-src="/path/to/image-2.jpg" />
  </AutoplaySlider>
);

Using the Captioned HOC with plain CSS

import AwesomeSlider from 'react-awesome-slider';
import withCaption from 'react-awesome-slider/dist/captioned';
import 'react-awesome-slider/dist/styles.css';
import 'react-awesome-slider/dist/captioned.css';

const CaptionedSlider = withCaption(AwesomeSlider);

const component = (
  <CaptionedSlider
    startupScreen={StartupScreen}
    cssModule={CaptionedStyles}
    screens={[
      {
        backgroundColor: '#4a9c8c',
        media: '/images/series/ricknmorty-3.png',
        caption: 'I want to see what you got.',
      },
      {
        backgroundColor: '#4a9c8c',
        media: '/images/series/ricknmorty-3.png',
        caption: "The answer is -- Don't think about it.",
      },
    ]}
  />
);

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 fillParent prop

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

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Swiper

Cons of Swiper

Code Comparison

Pros of Slick

Cons of Slick

Code Comparison

Summary

Pros of react-slick

Cons of react-slick

Code Comparison

Pros of Nuka Carousel

Cons of Nuka Carousel

Code Comparison

Pros of react-responsive-carousel

Cons of react-responsive-carousel

Code Comparison

Pros of react-id-swiper

Cons of react-id-swiper

Code Comparison

Convert designs to code with AI

README

React Awesome Slider v3 [NEW fullpage navigation HOC]

FULLPAGE navigation HOC

Basic usage

Basic usage with pure CSS

Animation recipes: scale-out, fold-out, cube, open and fall.

Cube animation recipe

Touch enabled

Live demo

Figma File

Installing

More Examples

Basic usage with Media object

Basic usage with CSS Modules

Fold-out animation recipe with CSS Modules

Using the Autoplay HOC with plain CSS

Using the Captioned HOC with plain CSS

Key Features

Main Props

Contribute

Author

Rafael Caferati

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days