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, 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.