chrsmutti/latte-carousel

LatteCarousel is a lightweight and responsive carousel.

About

LatteCarousel is a lightweight and responsive carousel without any dependencies.

Usage

<!-- Package -->
<link rel="stylesheet" href="latte-carousel.min.css">
<script src="latte-carousel.min.js"></script>

<!-- CDN -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/latte-carousel@1.3.0/dist/latte-carousel.min.css">
<script src="https://cdn.jsdelivr.net/npm/latte-carousel@1.3.0/dist/latte-carousel.min.js"></script>

<div class="latte-carousel" id="carousel">
    <div class="latte-item"></div>
    <div class="latte-item"></div>
    <div class="latte-item"></div>
    <div class="latte-item"></div>
</div>

var options = {
    count: 3,
    touch: true,
    buttons: true,
    dots: true,
    rewind: true,
    autoplay: 0,
    animation: 500,
    responsive: {
        "0": { count: 1.5, buttons: false },
        "480": { count: 2.5, buttons: false },
        "768": { count: 3, touch: false },
        "1440": { count: 4, touch: false },
    },
};

var carousel = new latte.Carousel("#carousel", options);

carousel.trigger("next");
carousel.trigger("previous");

carousel.trigger("goto", 0);

carousel.remove();

You can also include latte-carousel using ES6 import and Babel or Webpack.

This package already includes .d.ts files.

Features

• Responsive options
• Touch support
• Stage padding
• Navigation dots
• Rewind carousel
• Autoplay carousel
• Carousel events

Browser Support

This library is tested on Google Chrome, but it should work on all major browsers with CSS3 and ES5 support (including IE9+).

Build

Install dependencies:

yarn install

Build project:

yarn run build

Run example:

yarn run serve

open http://localhost:8080/example

Result files:

• dist/latte-carousel.min.css
• dist/latte-carousel.min.js