Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including skid-slider with all npm packages installed. Try it out:

require("hurdler/package.json"); // hurdler is a peer dependency. var skidSlider = require("skid-slider")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

skid-slider v4.0.0

An ultra-lightweight slider that supports touch.


NPM version Github issues Github stars

An ultra-lightweight slider that supports touch.



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 -->
    <a href="#/third" class="prior">Prior</a>
      <li><a href="#/first" class="active">1</a></li>
      <li><a href="#/second">2</a></li>
      <li><a href="#/third">3</a></li>
    <a href="#/second" class="next">Next</a>

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


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


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'),


Events can be listed for using addEventListener.

SlideractivatedA slide in the slider has been activated.
SlideactiveThe slide is now active.



A slider utilizing Hurdler for URL hash based control.


Constructs a new Skid slider instance.


  • 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.


Gets the slide before a slide.


Returns HTMLElement The slide before the input slide.


Gets the slide after a slide.


Returns HTMLElement The slide after the input slide.


Activates a slide and pans the slider to it.


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free