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:

• query
• classList
• CustomEvent
• requestAnimationFrame & cancelAnimationFrame

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

• slide HTMLElement Slide after the desired slide.

Returns HTMLElement The slide before the input slide.

getSlideAfter

Gets the slide after a slide.

Parameters

• slide HTMLElement Slide before the desired slide.

Returns HTMLElement The slide after the input slide.

activateSlide

Activates a slide and pans the slider to it.

Parameters

• slide (HTMLElement | string) Element or ID of the slide to activate.