React-fancy-carousel NPM

react-fancy-carousel

NPM GitHub Workflow Status npm bundle size

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 git@github.com: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

react carousel component accessible customizable

@everything-registry/sub-chunk-2554

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago