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	() => 1	group size
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, manager: Manager) => void // You can acces and modify `manager.shouldPrevent` (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.