epic-slidy

An EPIC slider


Keywords
epic, slider, gallery, carousel, DOM, browser, touch, responsive, javascript
License
Unlicense
Install
npm install epic-slidy@1.1.10

Documentation

Slidy

Read this before doing anything… 😛

to do: install, example, doc, etc…

I/O

Create a parent with children:

<ul class="if-you-want">
  <!-- or <div> or … -->
  <li><img /></li>
  <!-- or <div> or … -->
  <li>
    <img />
    <div>extra content</div>
  </li>
  …
</ul>

then a Slidy instance with some options (including your transition animation):

import Slidy from 'epic-slidy'

const transition = (
  currentSlide: HTMLElement | HTMLElement[],
  newSlide: HTMLElement | HTMLElement[],
  {
    animate: boolean,
    direction: 'prev' | 'next',
    currentIndex: number,
    currentGroup: number,
    newIndex: number,
    newGroup: number,
    trigger:
      'auto' |
      'click' |
      'tap' |
      'drag' |
      'swipe' |
      'nav' |
      'pagination' |
      'controls',
  } as TransitionInfos
) => Promise.resolve() // Do what you want here and return a promise…

// New slider with HTMLElement or CSS selector
const slider = new Slidy('.if-you-want', {
  controls: true,
  nav: true,
  transition,
})
// Use some hooks
slider.on('beforeInit', cb)
// Then init
slider.init()

and you will get this:

<div class="slidy-outer">
  <ul class="slidy what-you-want">
    <li class="slidy__item"><img /></li>
    <li class="slidy__item">
      <img />
      <div>extra content</div>
    </li>
    …
  </ul>
  <!-- if option controls -->
  <div class="slidy-controls">
    <button class="slidy-controls__item--prev">&lt;</button>
    <button class="slidy-controls__item--next">&gt;</button>
  </div>
  <!-- if option nav -->
  <ol class="slidy-nav">
    <li class="slidy-nav__item is-active">
      <button disabled="true">1</button>
    </li>
    <li class="slidy-nav__item">
      <button>2</button>
    </li>
    …
  </ol>
</div>
<!-- end .slidy-outer -->

Config / options

Option Values Default Description
auto boolean false Auto-start
click boolean true Enable next slide on click
controls boolean or 'template string' false Next / prev buttons (see examples)
debounce number 100 Debounce delay on resize
drag boolean false Enable horizontal mouse drag
group number or () => number 'auto' Auto or pixel height
height 'auto' or number 'auto' Auto or pixel height
index number 0 Initial index
interval number 2000 Time (ms) betweeen 2 transitions
keyboard boolean false Enable keyboard arrows controls
loop boolean true loop … or not
namespace string 'slidy' CSS custom [class]namespace
nav boolean, 'number', 'thumb' or 'template string' false Display a navigation with numbers / thumbs within custom template (see examples)
pagination boolean or 'separator string' false Display a pagination
pause boolean true Pause on hover
preserveGroup boolean true On loop, force entire group (group: 2 -> 1 2 3 4 5)
queue number 1 Queue max items
resize boolean true Enable resize event and callback
reverse boolean false Reverse directions / controls
swipe boolean false Enable horizontal swipe
tap boolean false Enable next slide on tap
transition Function null Animation function which returns a promise
zerofill boolean or number false 'Zerofill' (1 -> 01) numbers for both nav or pagination

controls details

  • controls: false -> no navigation
  • controls: true -> controls with < / >
  • controls: '<div>${label}</div>' -> <div>previous slide</div> / <div>next slide</div>

If slide elements have a data-slidy-nav attribute, this will override "number" or "thumb" content…

nav details

  • nav: false -> no navigation
  • nav: true -> navigation with numbers (1, 2, 3, …)
  • nav: 'number' -> same as true
  • nav: 'thumb' -> navigation with thumbs ([image-name]_thumb.ext)
  • nav: '<div>${number}</div>' -> custom "number" navigation
  • nav: '<div>${thumb}</div>' -> custom "thumb" navigation

If slide elements have a data-slidy-nav attribute, this will override "number" or "thumb" content…

Hooks

Usage

slider.on('hookName', function cb() {})

List

type beforeInit = (el: HTMLElement) => void
type afterInit = (el: HTMLElement) => void
type afterResize = (el: HTMLElement) => void
type preventSlide: (action: Action) => boolean
type beforeSlide = (infos: TransitionInfos) => void
type afterSlide = (infos: TransitionInfos) => void

How to contribute

If you want to report a bug or if you just want to request for a new feature/improvement, please follow those instructions before.

Thanks for taking time to contribute to slidy 🎉 👍


License

See UNLICENSE.