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 -->
<link rel="stylesheet" href="latte-carousel.min.css" />
<script src="latte-carousel.min.js"></script>
<script src="react-latte-carousel.min.js"></script>

<!-- UMD - CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/latte-carousel.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/latte-carousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/react-latte-carousel.min.js"></script>

<!-- ES6 -->
import { LatteCarousel, LatteItem } from "react-latte-carousel";

<!-- UMD -->
const LatteCarousel = ReactLatte.LatteCarousel;
const LatteItem = ReactLatte.LatteItem;

render() {
    const options = this.getOptions();

    return (
        <LatteCarousel options={options}>
            <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>
    );
}

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<String, Object> | 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:

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