About
LatteCarousel is a lightweight and responsive carousel without any dependencies.
Warning
This is a wrapper component for LatteCarousel and not a full rewrite in React.
This should be used only to display components that don't require DOM events.
React events will not work because of DOM manipulation inside latte-carousel.
Usage
There are two ways for using react-latte-carousel:
- Include both latte-carousel and react-latte-carousel packages and import using ES6 with Babel or Webpack.
- Include both UMD (Universal Module Definition) files and use it directly.
This package already includes .d.ts files.
<!-- UMD - Package --> <!-- UMD - CDN -->
<!-- ES6 -->import LatteCarousel LatteItem from "react-latte-carousel"; <!-- UMD -->const LatteCarousel = ReactLatteLatteCarousel;const LatteItem = ReactLatteLatteItem;
{ const options = this; return <LatteCarousel => <LatteItem> <div>1</div> </LatteItem> <LatteItem> <div>2</div> </LatteItem> <LatteItem> <div>3</div> </LatteItem> <LatteItem> <div>4</div> </LatteItem> <LatteItem> <div>5</div> </LatteItem> <LatteItem> <div>6</div> </LatteItem> </LatteCarousel> ;}
{ return count: 3 move: 1 touch: true mode: "align" buttons: true dots: true rewind: true autoplay: 0 animation: 500 responsive: "0": count: 15 mode: "free" buttons: false "480": count: 25 mode: "free" buttons: false "768": count: 3 move: 3 touch: false dots: false "1440": count: 4 move: 2 touch: false dots: false ;}
Options
Name | Type | Default | Description |
---|---|---|---|
count | Number | 3 | Number of visible items |
move | Number | 1 | Number of items to scroll |
touch | Boolean | false | Enable touch support |
mode | String [align, free] | "align" | Align animation to grid (touch only) |
buttons | Boolean | true | Enable carousel buttons |
dots | Boolean | false | Enable carousel dots |
rewind | Boolean | true | Enable rewind at the end (or start) |
autoplay | Number | 0 | Autoplay time in millis (0 to disable) |
animation | Number | 500 | Animation time in millis |
responsive | Map<String, Object> | undefined | Map of options for each breakpoint |
Features
- Responsive options
- Touch support
- Stage padding
- Navigation dots
- Rewind carousel
- Autoplay carousel
- Carousel events
Build
Install dependencies:
yarn install
Build project:
yarn run build
Run example:
yarn run serve open http://localhost:8080/example
Result files:
- dist/react-latte-carousel.min.js