README
Skid">
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.
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.