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

<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>

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

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