react-latte-carousel

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

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