skid-slider

An ultra-lightweight slider that supports touch.

Usage no npm install needed!

<script type="module">
  import skidSlider from 'https://cdn.skypack.dev/skid-slider';
</script>

README

Skid">

NPM version Github issues Github stars

An ultra-lightweight slider that supports touch.

Setup

HTML

Skid expects the following HTML structure:

<section class="skid drag">
  <ol class="slides">
    <li class="active" id="first">
      <!-- Content -->
    </li><li id="second">
      <!-- Content -->
    </li><li id="third">
      <!-- Content -->
    </li>
  </ol>
  <nav>
    <a href="#/third" class="prior">Prior</a>
    <ol>
      <li><a href="#/first" class="active">1</a></li>
      <li><a href="#/second">2</a></li>
      <li><a href="#/third">3</a></li>
    </ol>
    <a href="#/second" class="next">Next</a>
  </nav>
</section>

Make sure there are no spaces or line breaks between slide elements to avoid whitespace issues.

CSS

Add and customize the source styles from src/index.css, or use the compiled styles in node_modules/dist/skid.css.

JS

Skid requires a Hurdler instance – see the Hurdler project for setup instructions.

Be sure to use the DOM4 polyfill or manually handle:

Install Skid in your project as an NPM dependency:

npm install skid-slider --save

Import it:

import Skid from 'skid-slider'

Initialize it after DOM ready:

const skid = new Skid.Slider({
  element: document.querySelector('.skid'),
  hurdler
})

Events

Events can be listed for using addEventListener.

Element Event Description
Slider activated A slide in the slider has been activated.
Slide active The slide is now active.

API

Skid

A slider utilizing Hurdler for URL hash based control.

Slider

Constructs a new Skid slider instance.

Parameters

  • options Object Initialization options.

    • options.element HTMLElement Container.
    • options.slides HTMLElement? Slides container.
    • options.priorLink (HTMLElement | boolean)? Prior slide link, or false.
    • options.nextLink (HTMLElement | boolean)? Next slide link, or false.
    • options.tabs (HTMLElement | boolean)? Tab links container, or false.
    • options.dragClass string? Container class name to enable drag and flick. (optional, default 'drag')
    • options.draggingClass string? Container class name for dragging state. (optional, default 'dragging')
  • hurdler Hurdler Hurdler instance.

getSlideBefore

Gets the slide before a slide.

Parameters

Returns HTMLElement The slide before the input slide.

getSlideAfter

Gets the slide after a slide.

Parameters

Returns HTMLElement The slide after the input slide.

activateSlide

Activates a slide and pans the slider to it.

Parameters