A tiny carousel component for react
FlatCarousel
a tiny carousel component for react.
Features
- no dependency
- support autoplay
- support touch and mouse device
- transition done with raf and tweening.
- infinite loop without duplicating the first&last item
Demo
import Carousel from 'flat-carousel';
const images = [
{ src: 'some image' }
];
const MyCarousel = () => (
<Carousel>
{images.map((image, index) => (
<div
key={index}
className="demo-item"
style={{ backgroundImage: 'url(' + image.src + ')' }}
/>
))}
</Carousel>
);
Props
initialIndex?
: number, defaults to 0transitionDuration?
: number, defaults to 400msautoplay?
: boolean, defaults to trueautoplayInterval?
: number, defaults to 3000msinfiniteLoop?
: boolean, defaults to trueonPageChange?(index: number)
: void;