react-flex-carousel

A simple responsive Carousel powered by React and CSS Flexbox

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-flex-carousel
1511.1.05 years ago7 years agoMinified + gzip package size for react-flex-carousel in KB

Readme

react-flex-carousel
A simple responsive Carousel powered by React and CSS Flexbox
You can also try nuka-carousel if needed more features.
CAUTION, this package export ES2015 module, if you need CommonJS or UMD support, please use babel to compile

Feature

  • Support swipe touch gesture
  • CSS style customization

Usage

<Carousel autoPlayInterval={4500} indicator={true} switcher={true}>
	<div></div>
	<div></div>
	<div></div>
</Carousel>

Props

  • className:
class name on Carousel for CSS styling, default is `slider`
  • autoPlayInterval:
set inteval number in ms to enable carousel autoplay
  • transitionDuration:
CSS transition-duration, default is `.8s`
  • transitionTimingFunction:
CSS transition-timing-function, default is `ease-in-out`
  • switcher:
toggle to show the prev/next buttons, default is `false`
  • indicator:
toggle to show the indicator dots, default is `false`
  • slideWillChange(newSlideIndex, currentSlideIndex):
hook function before slide transition, return `false` could cancel transition.
  • slideDidChange(newSlideIndex):
hook function after slide transition.
  • initialSlide:
index of displayed starting slide, default is `1`.
Then apply your style, take slider.css for reference.

Demo

Install nwb, then nwb react run example.js to see the demo.

License

MIT