@root_ish/coral NPM

Instalation

Install the package using yarn install @root_ish/coral and import the JS and CSS

@import url('@root_ish/coral/lib/coral-scroll.css');

How to use

<coral-scroll class="coral-scroll">
  <div class="coral-scroll__grab-overlay"></div>
  <div class="coral-scroll__slider">
    <div class="slide"></div>
    <!-- end .slide -->

  </div>
  <!-- end .coral-scroll__slider -->
  
  <div class="coral-scroll__arrows">
    <button type="button" class="button arrow previous js-disabled" aria-label="previous slide button" name="previous slide button">
      {%- render 'arrow-left' -%}
    </button>
    <!-- end .previous -->

    <button type="button" class="button arrow next" aria-label="next slide button" name="next slide button">
      {%- render 'arrow-right' -%}
    </button>
    <!-- end .next -->

  </div>
  <!-- end .coral-scroll__arrows -->

  <div class="coral-scroll__indicator">
    <button type="button" class="dot" data-index="0" aria-label="Select slide 0" name="Select slide 0"></button>
    <!-- end .dot -->

  </div>
  <!-- end .coral-scroll__indicator -->

</coral-scroll>
<!-- end coral-scroll -->

To connect the JS with the HTML you can use the CoralScrollCore class however you like.

import CoralScrollCore from '@root_ish/coral'

class CoralScrollElement extends HTMLElement {
  constructor() {
    super()

    const coralScrollElement = this

    new CoralScrollCore(coralScrollElement)
  }
}

// Check if element is defined, if not define it.
// eslint-disable-next-line no-undefined
if (customElements.get('coral-scroll') === undefined) {
  customElements.define('coral-scroll', CoralScrollElement)
}

Coral scroll features

Dev mode

To see what the start end points are on the slider and get some stats about the slider when scrolling in your console. Add the following to the data-dev-mode="true" coral-scroll element.