react-animated-slider

A Slider/Carousel component for React supporting custom css animations.

Demo - Codesandbox Playground

Features

• Ready to use slider component with animations
• Easy customization
• Horizontal or vertical navigation
• Swipe navigation on touch devices
• Infinite slider
• Autoplay
• Supports any element as children
• Clean DOM without dirty manipulations
• Support for CSS modules
• Works with SSR
• Works on IE11

Install

npm install react-animated-slider

Note: this component relies on getDerivedStateFromProps and requires [email protected] or newer. For older react versions please install react-animated-slider version 1:

npm install [email protected]^1

Most Simple Use

import Slider from 'react-animated-slider';
import 'react-animated-slider/build/horizontal.css';

const slides = [
  { title: 'First item', description: 'Lorem ipsum'}
  { title: 'Second item', description: 'Lorem ipsum'}
];

<Slider>
  {slides.map((slide, index) => <div key={index}>
    <h2>{slide.title}</h2>
    <div>{slide.description}</div>
  </div>)}
</Slider>

Properties

{
  slider: 'slider',
  previousButton: 'previousButton',
  nextButton: 'nextButton',
  buttonDisabled: 'disabled',
  track: 'track',
  slide: 'slide',
  hidden: 'hidden',
  previous: 'previous',
  current: 'current',
  next: 'next',
  animateIn: 'animateIn',
  animateOut: 'animateOut',
}

Classnames

Events