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.

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.

ElementEventDescription
SlideractivatedA slide in the slider has been activated.
SlideactiveThe 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

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