Skip to content

Latest commit

 

History

History
47 lines (33 loc) · 1.44 KB

README.md

File metadata and controls

47 lines (33 loc) · 1.44 KB
Raw

Shift Slider

A CSS first, pragmatic JavaScript slider

Demo

See some examples of it in action here

How to use

On page load Shift Slider looks for data-ShiftSlider attributes and instantiates a slider for for each one found.

A slider can take the following structure, where only the data-ShiftSlider- style attributes matter:

  <div data-ShiftSlider>
    <div data-ShiftSlider-item></div>
    <div data-ShiftSlider-item></div>
    <div data-ShiftSlider-item></div>

    <div data-ShiftSlider-prev></div>
    <div data-ShiftSlider-next></div>
  </div>

Once initiated classes are added to the slider, expressing current slides and the others' relative positions to that slide:

  <div data-ShiftSlider>
    <div data-ShiftSlider-item class="ShiftSlider-prev ShiftSlider-prev-1"></div>
    <div data-ShiftSlider-item class="ShiftSlider-current"></div>
    <div data-ShiftSlider-item class="ShiftSlider-next ShiftSlider-next-1"></div>
    <div data-ShiftSlider-item class="ShiftSlider-next ShiftSlider-next-2"></div>

    <div data-ShiftSlider-prev></div>
    <div data-ShiftSlider-next></div>
  </div>

This leaves styling and animating up to CSS 💅

Features

  • trigger slide changes from other elements or function calls
  • support multiple instances on the page
  • build-chain (minify and transpiling) & extended browser support
  • navigate from #hash-url-changes