@morsedigital/vanilla-carousel NPM

vanilla-carousel

Synopsis

An image carousel written in vanilla JavaScript.

Installation

yarn @morsedigital/vanilla-carousel

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