Skid-slider NPM

NPM version Github issues Github stars

An ultra-lightweight slider that supports touch.

~2 KB compressed.
Browser support: > 2%.
MIT license.

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.