epic-slidy v1.1.10

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

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 :tada: :+1:

License

See UNLICENSE.