react-fancy-carousel
v1.1.0
Published
An accessible and customizable react carousel component. Easy to use.
Downloads
41
Maintainers
Readme
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 [email protected]: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