react-latte-carousel v1.3.0

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/latte-carousel@1.6.1/dist/latte-carousel.min.css" />
<script src="https://cdn.jsdelivr.net/npm/latte-carousel@1.6.1/dist/latte-carousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-latte-carousel@1.3.0/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

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