npm package: @morsedigital/vanilla-carousel
Description: Carousel module written in vanilla JavaScript
Author: Morse Digital
Latest version: 4.6.0

# vanilla-carousel

### Synopsis

An image carousel written in vanilla JavaScript.

### Installation

```
yarn @morsedigital/vanilla-carousel
```

or

```
npm install @morsedigital/vanilla-carousel
```

### Example Instantiation

Firstly set up the html.erb for the carousel

```html
<div
  class="carousel <%=css_variation%>"
  id="main-carousel"
  data-autoplay="5"
  data-carousel="true"
  data-arrows="false"
  data-items="carousel__item"
  data-control="carousel-controls"
  data-holder="carousel__inner"
  data-play-btn="false"
  data-svg="assets/carousel.svg"
  aria-labelledby="carousel-heading"
>
  <h3 id="carousel-heading" class="hidden">Promo Carousel</h3>
  <div class="carousel__inner">
    <div class="carousel__item">
      <div
        class="carousel__image-container"
        style="background-image:url('http://www.fillmurray.com/1280/391')"
        data-mobile="http://www.fillmurray.com/480/360"
        data-tablet="http://www.fillmurray.com/768/432"
        data-desktop="http://www.fillmurray.com/1280/391"
      >
        <div class="carousel-overlay">
          <h2>Bill Murray</h2>
          <h3>Lorem ipsum dolor sit amet</h3>
        </div>
      </div>
    </div>
  </div>
  <fieldset
    aria-label="carousel buttons"
    class="carousel__nav"
    id="carousel-controls"
  ></fieldset>
</div>
```

```javascript
import Carousel from "@morsedigital/vanilla-carousel";
import "@morsedigital/vanilla-carousel/carousel.scss";
import "@morsedigital/vanilla-carousel/assets/carousel.svg";

// No need to add guard check unless you dynamically load module
(() => {
  Carousel();
})();
```

Or dynamically load modules

```javascript
import "@morsedigital/vanilla-carousel/carousel.scss";
import "@morsedigital/vanilla-carousel/assets/carousel.svg";

const carouselElements = [...document.querySelectorAll('[data-carousel]')];

if (carouselElements.length > 0) {
  import(/* webpackChunkName: "vanilla-carousel" */ '@morsedigital/vanilla-carousel').then(
    ({ default: Carousel }) => {
      Carousel();
    }
  );

```

## Options

Options are added via data attributes

| Option        | DataAttribute       | Default           | Explanation                                                      |
| :------------ | :------------------ | :---------------- | ---------------------------------------------------------------- |
| items         | data-items          | carousel\_\_item  | css class name for each carousel item                            |
| autoplay      | data-autoplay       | false             | boolean to toggle auto play (rotation) of carousel               |
| arrows        | data-arrows         | true              | boolean to add left/right arrows                                 |
| holder        | data-holder         | carousel\_\_inner | the class of the inner wrapper that all carousel items sits in   |
| control       | data-control        | carousel-controls | class of the controller block                                    |
| naturalScroll | data-natural-scroll | true              | whether animation will apply a natural scroll effect to movement |
| playBtn       | data-play-btn       | true              | show a play pause button                                         |
| svg           | data-svg            | null              | path to svg sprite of control icons                              |

### Running tests

```
yarn test
```