react-fancy-carousel

• Built-in common different carousel effects and indicators.
• Support theme extension.
• Support indicator customization.
• ARIA-ify, accessible to people with disabilities.
• With complete test cases.

Demo Page

Installation

npm install react-fancy-carousel --save

Usage

Component

import Carousel from 'react-fancy-carousel'
import 'react-fancy-carousel/dist/style.css'

const Item = Carousel.Item
const ImgItem = Carousel.ImgItem

export default () => {
  return (
    <Carousel autoplay>
      <Item>{content1}</Item>
      <Item>{content2}</Item>
      <ImgItem src={imgSrc1} alt="" />
      <ImgItem src={imgSrc2} alt="" />
    </Carousel>
  )
}

Options

Name	Type	Description	Default
autoplay	boolean	Autoplay.	false
effect	'slide' | 'fade'	Change animation effect.	'slide'
duration	number	Autoplay time duration.	3000 (ms)
speed	number	Transition speed.	500 (ms)
timingFunction	string	Transition timing function, reference to css property 'transition-timing-function'	'ease'
infiniteLoop	boolean	Infinite loop.	true
pauseOnHover	boolean	Pause autoplay on hover	false
indicator	'solid' | 'dot' | React.ComponentType | null	Use built-in indicator or customized component, it will be hidden when set to null.	'solid'
onChange	(currIndex: number, prevIndex: number) => void	Active item change handler.	() => {}

Ref instance methods (interface RefType)

Name	Type	Description
next	() => void	Change to next item.
prev	() => void	Change to prev item.
goTo	(index: number) => void	Change to item given by index.

Customized indicator component options (interface IndicatorPropsType)

Name	Type	Description
uid	string	Carousel instance uid, used for ARIA.
itemCount	number	Carousel item total count.
activeIndex	number	Current active index.
animation	number	Show animation.
duration	number	Animation duration.
paused	boolean	Animation paused.
next	() => void	Change to next item.
prev	() => void	Change to prev item.
goTo	(index: number) => void	Change to item given by index.

Theme css vars

.default {
  --indicator-bg-color: rgba(0, 0, 0, 0.4);
  --indicator-active-bg-color: #fff;

  --indicator-items-gap: 10px;
  --indicator-surround-offset: 30px;

  --indicator-dot-diameter: 10px;

  --indicator-solid-width: 40px;
  --indicator-solid-height: 3px;
  --indicator-solid-padding-y: 5px;
  --indicator-solid-border-radius: 2px;
}

Test

git clone [e-mail]:jackyr/react-fancy-carousel.git
cd react-fancy-carousel
npm install
npm test

Browser compatibility

Supports Chrome51+ / Edge15+ / Safari10+ / Firefox54+ / etc. ES6 environment.

Changelog

• v1.1.0 - Add ImgItem component / fix style / fix type definition
• v1.0.1 - Valid from v1.0.1
• v1.0.0 - Invalid version, unpublished