Neutrinos Peludos Magnéticos

    epic-slidy
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.10 • Public • Published

    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 🎉 👍


    License

    See UNLICENSE.

    Install

    npm i epic-slidy

    DownloadsWeekly Downloads

    136

    Version

    1.1.10

    License

    SEE LICENSE IN UNLICENSE

    Unpacked Size

    331 kB

    Total Files

    21

    Last publish

    Collaborators

    • thierrymichel