react-flex-carousel
v1.1.0
Published
A simple responsive Carousel powered by React and CSS Flexbox
Downloads
132
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