# 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.
```html
```
```jsx
import { LatteCarousel, LatteItem } from "react-latte-carousel";
const LatteCarousel = ReactLatte.LatteCarousel;
const LatteItem = ReactLatte.LatteItem;
```
```jsx
render() {
const options = this.getOptions();
return (
1
2
3
4
5
6
);
}
```
```jsx
getOptions() {
return {
count: 3,
move: 1,
touch: true,
mode: "align",
buttons: true,
dots: true,
rewind: true,
autoplay: 0,
animation: 500,
responsive: {
"0": { count: 1.5, mode: "free", buttons: false },
"480": { count: 2.5, 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 | undefined | Map of options for each breakpoint |
## Features
- [x] Responsive options
- [x] Touch support
- [x] Stage padding
- [x] Navigation dots
- [x] Rewind carousel
- [x] Autoplay carousel
- [x] Carousel events
## Build
Install dependencies:
```sh
yarn install
```
Build project:
```sh
yarn run build
```
Run example:
```sh
yarn run serve
open http://localhost:8080/example
```
Result files:
- dist/react-latte-carousel.min.js
---
_Source: https://npm.io/package/react-latte-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
