slyer.js

import $ from 'jquery'
import defaults from './defaults'

const namespace = 'sly'
const w = window
// Local WindowAnimationTiming interface
let cAF = w.cancelAnimationFrame || w.cancelRequestAnimationFrame
let rAF = w.requestAnimationFrame

// Support indicators
let transform, gpuAcceleration

// Other global values
const $doc = $(document)
const dragInitEvents = `touchstart.${namespace} mousedown.${namespace}`
const dragMouseEvents = `mousemove.${namespace} mouseup.${namespace}`
const dragTouchEvents = `touchmove.${namespace} touchend.${namespace}`
const wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel.' : 'mousewheel.') + namespace
const clickEvent = `click.${namespace}`
const mouseDownEvent = `mousedown.${namespace}`
const interactiveElements = ['INPUT', 'SELECT', 'BUTTON', 'TEXTAREA']
const tmpArray = []
let time

// Math shorthands
const abs = Math.abs
const sqrt = Math.sqrt
const pow = Math.pow
const round = Math.round
const max = Math.max
const min = Math.min

// Keep track of last fired global wheel event
let lastGlobalWheel = 0
$doc.on(wheelEvent, event => {
  const sly = event.originalEvent[namespace]
  let time = +new Date()
  // Update last global wheel time, but only when event didn't originate
  // in Sly frame, or the origin was less than scrollHijack time ago
  if (!sly || sly.options.scrollHijack < time - lastGlobalWheel) lastGlobalWheel = time
})

/**
 * Sly.
 *
 * @class
 *
 * @param {Element} frame       DOM element of sly container.
 * @param {Object}  options     Object with options.
 * @param {Object}  callbackMap Callbacks map.
 */
function Sly (frame, options, callbackMap) {
  if (!(this instanceof Sly)) return new Sly(frame, options, callbackMap)

  // Extend options
  const o = $.extend({}, Sly.defaults, options)

  // Private variables
  const self = this
  const parallax = isNumber(frame)

  // Frame
  const $frame = $(frame)
  const $slidee = o.slidee ? $(o.slidee).eq(0) : $frame.children().eq(0)
  let frameSize = 0
  let slideeSize = 0
  let pos = {
    start: 0,
    center: 0,
    end: 0,
    cur: 0,
    dest: 0
  }

  // Scrollbar
  const $sb = $(o.scrollBar).eq(0)
  const $handle = $sb.children().eq(0)
  let sbSize = 0
  let handleSize = 0
  let hPos = {
    start: 0,
    end: 0,
    cur: 0
  }

  // Pagesbar
  const $pb = $(o.pagesBar)
  let $pages = 0
  let pages = []

  // Items
  let $items = 0
  let items = []
  let rel = {
    firstItem: 0,
    lastItem: 0,
    centerItem: 0,
    activeItem: null,
    activePage: 0
  }

  // Styles
  const frameStyles = new StyleRestorer($frame[0])
  const slideeStyles = new StyleRestorer($slidee[0])
  const sbStyles = new StyleRestorer($sb[0])
  const handleStyles = new StyleRestorer($handle[0])

  // Navigation type booleans
  const basicNav = o.itemNav === 'basic'
  const forceCenteredNav = o.itemNav === 'forceCentered'
  const centeredNav = o.itemNav === 'centered' || forceCenteredNav
  const itemNav = !parallax && (basicNav || centeredNav || forceCenteredNav)

  // Miscellaneous
  const $scrollSource = o.scrollSource ? $(o.scrollSource) : $frame
  const $dragSource = o.dragSource ? $(o.dragSource) : $frame
  const $forwardButton = $(o.forward)
  const $backwardButton = $(o.backward)
  const $prevButton = $(o.prev)
  const $nextButton = $(o.next)
  const $prevPageButton = $(o.prevPage)
  const $nextPageButton = $(o.nextPage)
  const callbacks = {}
  let last = {}
  const animation = {}
  const move = {}
  let dragging = {
    released: 1
  }
  const scrolling = {
    last: 0,
    delta: 0,
    resetTime: 200
  }
  let renderID = 0
  let historyID = 0
  let cycleID = 0
  let continuousID = 0
  let i, l

  // Normalizing frame
  if (!parallax) {
    frame = $frame[0]
  }

  // Expose properties
  self.initialized = 0
  self.frame = frame
  self.slidee = $slidee[0]
  self.pos = pos
  self.rel = rel
  self.items = items
  self.pages = pages
  self.isPaused = 0
  self.options = o
  self.dragging = dragging

  /**
   * Loading function.
   *
   * Populate arrays, set sizes, bind events, ...
   *
   * @param {Boolean} [isInit] Whether load is called from within self.init().
   * @return {Void}
   */
  function load (isInit) {
    // Local variables
    const lastPagesCount = pages.length

    // Save old position
    pos.old = $.extend({}, pos)

    // Reset global variables
    frameSize = parallax ? 0 : $frame[o.horizontal ? 'width' : 'height']()
    sbSize = $sb[o.horizontal ? 'width' : 'height']()
    slideeSize = parallax ? frame : $slidee[o.horizontal ? 'outerWidth' : 'outerHeight']()
    pages.length = 0

    // Set position limits & relatives
    pos.start = 0
    pos.end = max(slideeSize - frameSize, 0)

    // Sizes & offsets for item based navigations
    if (itemNav) {
      // Reset itemNav related variables
      $items = $slidee.children(o.itemSelector)
      items.length = 0

      // Needed variables
      const paddingStart = getPx($slidee, o.horizontal ? 'paddingLeft' : 'paddingTop')
      const paddingEnd = getPx($slidee, o.horizontal ? 'paddingRight' : 'paddingBottom')
      const borderBox = $($items).css('boxSizing') === 'border-box'
      const areFloated = $items.css('float') !== 'none'
      let ignoredMargin = 0
      const lastItemIndex = $items.length - 1
      let lastItem

      // Reset slideeSize
      slideeSize = 0

      // Iterate through items
      $items.each((i, element) => {
        // Item
        const $item = $(element)
        const rect = element.getBoundingClientRect()
        const itemSize = round(o.horizontal ? rect.width || rect.right - rect.left : rect.height || rect.bottom - rect.top)
        const itemMarginStart = getPx($item, o.horizontal ? 'marginLeft' : 'marginTop')
        const itemMarginEnd = getPx($item, o.horizontal ? 'marginRight' : 'marginBottom')
        const itemSizeFull = itemSize + itemMarginStart + itemMarginEnd
        const singleSpaced = !itemMarginStart || !itemMarginEnd
        let item = {}
        item.el = element
        item.size = singleSpaced ? itemSize : itemSizeFull
        item.half = item.size / 2
        item.start = slideeSize + (singleSpaced ? itemMarginStart : 0)
        item.center = item.start - round(frameSize / 2 - item.size / 2)
        item.end = item.start - frameSize + item.size

        // Account for slidee padding
        if (!i) {
          slideeSize += paddingStart
        }

        // Increment slidee size for size of the active element
        slideeSize += itemSizeFull

        // Try to account for vertical margin collapsing in vertical mode
        // It's not bulletproof, but should work in 99% of cases
        if (!o.horizontal && !areFloated) {
          // Subtract smaller margin, but only when top margin is not 0, and this is not the first element
          if (itemMarginEnd && itemMarginStart && i > 0) {
            slideeSize -= min(itemMarginStart, itemMarginEnd)
          }
        }

        // Things to be done on last item
        if (i === lastItemIndex) {
          item.end += paddingEnd
          slideeSize += paddingEnd
          ignoredMargin = singleSpaced ? itemMarginEnd : 0
        }

        // Add item object to items array
        items.push(item)
        lastItem = item
      })

      // Resize SLIDEE to fit all items
      $slidee[0].style[o.horizontal ? 'width' : 'height'] = `${borderBox ? slideeSize : slideeSize - paddingStart - paddingEnd}px`

      // Adjust internal SLIDEE size for last margin
      slideeSize -= ignoredMargin

      // Set limits
      if (items.length) {
        pos.start = items[0][forceCenteredNav ? 'center' : 'start']
        pos.end = forceCenteredNav ? lastItem.center : frameSize < slideeSize ? lastItem.end : pos.start
      } else {
        pos.start = pos.end = 0
      }
    }

    // Calculate SLIDEE center position
    pos.center = round(pos.end / 2 + pos.start / 2)

    // Update relative positions
    updateRelatives()

    // Scrollbar
    if ($handle.length && sbSize > 0) {
      // Stretch scrollbar handle to represent the visible area
      if (o.dynamicHandle) {
        handleSize = pos.start === pos.end ? sbSize : round(sbSize * frameSize / slideeSize)
        handleSize = within(handleSize, o.minHandleSize, sbSize)
        $handle[0].style[o.horizontal ? 'width' : 'height'] = `${handleSize}px`
      } else {
        handleSize = $handle[o.horizontal ? 'outerWidth' : 'outerHeight']()
      }

      hPos.end = sbSize - handleSize

      if (!renderID) {
        syncScrollbar()
      }
    }

    // Pages
    if (!parallax && frameSize > 0) {
      let tempPagePos = pos.start
      let pagesHtml = ''

      // Populate pages array
      if (itemNav) {
        $.each(items, (i, item) => {
          if (forceCenteredNav) {
            pages.push(item.center)
          } else if (item.start + item.size > tempPagePos && tempPagePos <= pos.end) {
            tempPagePos = item.start
            pages.push(tempPagePos)
            tempPagePos += frameSize
            if (tempPagePos > pos.end && tempPagePos < pos.end + frameSize) {
              pages.push(pos.end)
            }
          }
        })
      } else {
        while (tempPagePos - frameSize < pos.end) {
          pages.push(tempPagePos)
          tempPagePos += frameSize
        }
      }

      // Pages bar
      if ($pb[0] && lastPagesCount !== pages.length) {
        for (let i = 0; i < pages.length; i++) {
          pagesHtml += o.pageBuilder.call(self, i)
        }
        $pages = $pb.html(pagesHtml).children()
        $pages.eq(rel.activePage).addClass(o.activeClass)
      }
    }

    // Extend relative variables object with some useful info
    rel.slideeSize = slideeSize
    rel.frameSize = frameSize
    rel.sbSize = sbSize
    rel.handleSize = handleSize

    // Activate requested position
    if (itemNav) {
      if (isInit && o.startAt != null) {
        activate(o.startAt)
        self[centeredNav ? 'toCenter' : 'toStart'](o.startAt)
      }
      // Fix possible overflowing
      let activeItem = items[rel.activeItem]
      slideTo(
                  centeredNav && activeItem ? activeItem.center : within(pos.dest, pos.start, pos.end)
              )
    } else {
      if (isInit) {
        if (o.startAt != null) slideTo(o.startAt, 1)
      } else {
        // Fix possible overflowing
        slideTo(within(pos.dest, pos.start, pos.end))
      }
    }

    // Trigger load event
    trigger('load')
  }
  self.reload = function () { load() }

  /**
   * Animate to a position.
   *
   * @param {Int}  newPos    New position.
   * @param {Bool} immediate Reposition immediately without an animation.
   * @param {Bool} dontAlign Do not align items, use the raw position passed in first argument.
   *
   * @return {Void}
   */
  function slideTo (newPos, immediate, dontAlign) {
    // Align items
    if (itemNav && dragging.released && !dontAlign) {
      const tempRel = getRelatives(newPos)
      const isNotBordering = newPos > pos.start && newPos < pos.end

      if (centeredNav) {
        if (isNotBordering) {
          newPos = items[tempRel.centerItem].center
        }
        if (forceCenteredNav && o.activateMiddle) {
          activate(tempRel.centerItem)
        }
      } else if (isNotBordering) {
        newPos = items[tempRel.firstItem].start
      }
    }

    // Handle overflowing position limits
    if (dragging.init && dragging.slidee && o.elasticBounds) {
      if (newPos > pos.end) {
        newPos = pos.end + (newPos - pos.end) / 6
      } else if (newPos < pos.start) {
        newPos = pos.start + (newPos - pos.start) / 6
      }
    } else {
      newPos = within(newPos, pos.start, pos.end)
    }

    // Update the animation object
    animation.start = +new Date()
    animation.time = 0
    animation.from = pos.cur
    animation.to = newPos
    animation.delta = newPos - pos.cur
    animation.tweesing = dragging.tweese || dragging.init && !dragging.slidee
    animation.immediate = !animation.tweesing && (immediate || dragging.init && dragging.slidee || !o.speed)

    // Reset dragging tweesing request
    dragging.tweese = 0

    // Start animation rendering
    if (newPos !== pos.dest) {
      pos.dest = newPos
      trigger('change')
      if (!renderID) {
        render()
      }
    }

    // Reset next cycle timeout
    resetCycle()

    // Synchronize states
    updateRelatives()
    updateButtonsState()
    syncPagesbar()
  }

  /**
   * Render animation frame.
   *
   * @return {Void}
   */
  function render () {
    if (!self.initialized) {
      return
    }

    // If first render call, wait for next animationFrame
    if (!renderID) {
      renderID = rAF(render)
      if (dragging.released) {
        trigger('moveStart')
      }
      return
    }

    // If immediate repositioning is requested, don't animate.
    if (animation.immediate) {
      pos.cur = animation.to
    } else if (animation.tweesing) {
      // Use tweesing for animations without known end point
      animation.tweeseDelta = animation.to - pos.cur
      // Fuck Zeno's paradox
      if (abs(animation.tweeseDelta) < 0.1) {
        pos.cur = animation.to
      } else {
        pos.cur += animation.tweeseDelta * (dragging.released ? o.swingSpeed : o.syncSpeed)
      }
    } else {
      // Use tweening for basic animations with known end point
      animation.time = min(+new Date() - animation.start, o.speed)
      pos.cur = animation.from + animation.delta * $.easing[o.easing](animation.time / o.speed, animation.time, 0, 1, o.speed)
    }

    // If there is nothing more to render break the rendering loop, otherwise request new animation frame.
    if (animation.to === pos.cur) {
      pos.cur = animation.to
      dragging.tweese = renderID = 0
    } else {
      renderID = rAF(render)
    }

    trigger('move')

    // Update SLIDEE position
    if (!parallax) {
      if (transform) {
        $slidee[0].style[transform] = `${gpuAcceleration}${o.horizontal ? 'translateX' : 'translateY'}(${-pos.cur}px)`
      } else {
        $slidee[0].style[o.horizontal ? 'left' : 'top'] = `${-round(pos.cur)}px`
      }
    }

    // When animation reached the end, and dragging is not active, trigger moveEnd
    if (!renderID && dragging.released) {
      trigger('moveEnd')
    }

    syncScrollbar()
  }

  /**
   * Synchronizes scrollbar with the SLIDEE.
   *
   * @return {Void}
   */
  function syncScrollbar () {
    if ($handle.length) {
      hPos.cur = pos.start === pos.end ? 0 : (((dragging.init && !dragging.slidee) ? pos.dest : pos.cur) - pos.start) / (pos.end - pos.start) * hPos.end
      hPos.cur = within(round(hPos.cur), hPos.start, hPos.end)
      if (last.hPos !== hPos.cur) {
        last.hPos = hPos.cur
        if (transform) {
          $handle[0].style[transform] = `${gpuAcceleration}${o.horizontal ? 'translateX' : 'translateY'}(${hPos.cur}px)`
        } else {
          $handle[0].style[o.horizontal ? 'left' : 'top'] = `${hPos.cur}px`
        }
      }
    }
  }

  /**
   * Synchronizes pagesbar with SLIDEE.
   *
   * @return {Void}
   */
  function syncPagesbar () {
    if ($pages[0] && last.page !== rel.activePage) {
      last.page = rel.activePage
      $pages.removeClass(o.activeClass).eq(rel.activePage).addClass(o.activeClass)
      trigger('activePage', last.page)
    }
  }

  /**
   * Returns the position object.
   *
   * @param {Mixed} item
   *
   * @return {Object}
   */
  self.getPos = function (item) {
    if (itemNav) {
      const index = getIndex(item)
      return index !== -1 ? items[index] : false
    } else {
      const $item = $slidee.find(item).eq(0)

      if ($item[0]) {
        const offset = o.horizontal ? $item.offset().left - $slidee.offset().left : $item.offset().top - $slidee.offset().top
        const size = $item[o.horizontal ? 'outerWidth' : 'outerHeight']()

        return {
          start: offset,
          center: offset - frameSize / 2 + size / 2,
          end: offset - frameSize + size,
          size: size
        }
      } else {
        return false
      }
    }
  }

  /**
   * Continuous move in a specified direction.
   *
   * @param  {Bool} forward True for forward movement, otherwise it'll go backwards.
   * @param  {Int}  speed   Movement speed in pixels per frame. Overrides options.moveBy value.
   *
   * @return {Void}
   */
  self.moveBy = function (speed) {
    move.speed = speed
    // If already initiated, or there is nowhere to move, abort
    if (dragging.init || !move.speed || pos.cur === (move.speed > 0 ? pos.end : pos.start)) {
      return
    }
    // Initiate move object
    move.lastTime = +new Date()
    move.startPos = pos.cur
    // Set dragging as initiated
    continuousInit('button')
    dragging.init = 1
    // Start movement
    trigger('moveStart')
    cAF(continuousID)
    moveLoop()
  }

  /**
   * Continuous movement loop.
   *
   * @return {Void}
   */
  function moveLoop () {
    // If there is nowhere to move anymore, stop
    if (!move.speed || pos.cur === (move.speed > 0 ? pos.end : pos.start)) {
      self.stop()
    }
    // Request new move loop if it hasn't been stopped
    continuousID = dragging.init ? rAF(moveLoop) : 0
    // Update move object
    move.now = +new Date()
    move.pos = pos.cur + (move.now - move.lastTime) / 1000 * move.speed
    // Slide
    slideTo(dragging.init ? move.pos : round(move.pos))
    // Normally, this is triggered in render(), but if there
    // is nothing to render, we have to do it manually here.
    if (!dragging.init && pos.cur === pos.dest) {
      trigger('moveEnd')
    }
    // Update times for future iteration
    move.lastTime = move.now
  }

  /**
   * Stops continuous movement.
   *
   * @return {Void}
   */
  self.stop = function () {
    if (dragging.source === 'button') {
      dragging.init = 0
      dragging.released = 1
    }
  }

  /**
   * Activate previous item.
   *
   * @return {Void}
   */
  self.prev = function () {
    self.activate(rel.activeItem == null ? 0 : rel.activeItem - 1)
  }

  /**
   * Activate next item.
   *
   * @return {Void}
   */
  self.next = function () {
    self.activate(rel.activeItem == null ? 0 : rel.activeItem + 1)
  }

  /**
   * Activate previous page.
   *
   * @return {Void}
   */
  self.prevPage = function () {
    self.activatePage(rel.activePage - 1)
  }

  /**
   * Activate next page.
   *
   * @return {Void}
   */
  self.nextPage = function () {
    self.activatePage(rel.activePage + 1)
  }

  /**
   * Slide SLIDEE by amount of pixels.
   *
   * @param {Int}  delta     Pixels/Items. Positive means forward, negative means backward.
   * @param {Bool} immediate Reposition immediately without an animation.
   *
   * @return {Void}
   */
  self.slideBy = function (delta, immediate) {
    if (!delta) {
      return
    }
    if (itemNav) {
      self[centeredNav ? 'toCenter' : 'toStart'](
                  within((centeredNav ? rel.centerItem : rel.firstItem) + o.scrollBy * delta, 0, items.length)
              )
    } else {
      slideTo(pos.dest + delta, immediate)
    }
  }

  /**
   * Animate SLIDEE to a specific position.
   *
   * @param {Int}  pos       New position.
   * @param {Bool} immediate Reposition immediately without an animation.
   *
   * @return {Void}
   */
  self.slideTo = function (pos, immediate) {
    slideTo(pos, immediate)
  }

  /**
   * Core method for handling `toLocation` methods.
   *
   * @param  {String} location
   * @param  {Mixed}  item
   * @param  {Bool}   immediate
   *
   * @return {Void}
   */
  function to (location, item, immediate) {
    // Optional arguments logic
    if (type(item) === 'boolean') {
      immediate = item
      item = undefined
    }

    if (item === undefined) {
      slideTo(pos[location], immediate)
    } else {
      // You can't align items to sides of the frame
      // when centered navigation type is enabled
      if (centeredNav && location !== 'center') {
        return
      }

      const itemPos = self.getPos(item)
      if (itemPos) {
        slideTo(itemPos[location], immediate, !centeredNav)
      }
    }
  }

  /**
   * Animate element or the whole SLIDEE to the start of the frame.
   *
   * @param {Mixed} item      Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
   * @param {Bool}  immediate Reposition immediately without an animation.
   *
   * @return {Void}
   */
  self.toStart = function (item, immediate) {
    to('start', item, immediate)
  }

  /**
   * Animate element or the whole SLIDEE to the end of the frame.
   *
   * @param {Mixed} item      Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
   * @param {Bool}  immediate Reposition immediately without an animation.
   *
   * @return {Void}
   */
  self.toEnd = function (item, immediate) {
    to('end', item, immediate)
  }

  /**
   * Animate element or the whole SLIDEE to the center of the frame.
   *
   * @param {Mixed} item      Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
   * @param {Bool}  immediate Reposition immediately without an animation.
   *
   * @return {Void}
   */
  self.toCenter = function (item, immediate) {
    to('center', item, immediate)
  }

  /**
   * Get the index of an item in SLIDEE.
   *
   * @param {Mixed} item     Item DOM element.
   *
   * @return {Int}  Item index, or -1 if not found.
   */
  function getIndex (item) {
    return item != null ? isNumber(item)
    ? item >= 0 && item < items.length ? item : -1 : items.index(item) : -1
  }
  // Expose getIndex without lowering the compressibility of it,
  // as it is used quite often throughout Sly.
  self.getIndex = getIndex

  /**
   * Get index of an item in SLIDEE based on a variety of input types.
   *
   * @param  {Mixed} item DOM element, positive or negative integer.
   *
   * @return {Int}   Item index, or -1 if not found.
   */
  function getRelativeIndex (item) {
    return getIndex(isNumber(item) && item < 0 ? item + items.length : item)
  }

  /**
   * Activates an item.
   *
   * @param  {Mixed} item Item DOM element, or index starting at 0.
   *
   * @return {Mixed} Activated item index or false on fail.
   */
  function activate (item, force) {
    const index = getIndex(item)

    if (!itemNav || index < 0) {
      return false
    }

    // Update classes, last active index, and trigger active event only when there
    // has been a change. Otherwise just return the current active index.
    if (last.active !== index || force) {
      // Update classes
      $items.eq(rel.activeItem).removeClass(o.activeClass)
      $items.eq(index).addClass(o.activeClass)

      last.active = rel.activeItem = index

      updateButtonsState()
      trigger('active', index)
    }

    return index
  }

  /**
   * Activates an item and helps with further navigation when o.smart is enabled.
   *
   * @param {Mixed} item      Item DOM element, or index starting at 0.
   * @param {Bool}  immediate Whether to reposition immediately in smart navigation.
   *
   * @return {Void}
   */
  self.activate = function (item, immediate) {
    const index = activate(item)

    // Smart navigation
    if (o.smart && index !== false) {
      // When centeredNav is enabled, center the element.
      // Otherwise, determine where to position the element based on its current position.
      // If the element is currently on the far end side of the frame, assume that user is
      // moving forward and animate it to the start of the visible frame, and vice versa.
      if (centeredNav) {
        self.toCenter(index, immediate)
      } else if (index >= rel.lastItem) {
        self.toStart(index, immediate)
      } else if (index <= rel.firstItem) {
        self.toEnd(index, immediate)
      } else {
        resetCycle()
      }
    }
  }

  /**
   * Activates a page.
   *
   * @param {Int}  index     Page index, starting from 0.
   * @param {Bool} immediate Whether to reposition immediately without animation.
   *
   * @return {Void}
   */
  self.activatePage = function (index, immediate) {
    if (isNumber(index)) {
      slideTo(pages[within(index, 0, pages.length - 1)], immediate)
    }
  }

  /**
   * Return relative positions of items based on their visibility within FRAME.
   *
   * @param {Int} slideePos Position of SLIDEE.
   *
   * @return {Void}
   */
  function getRelatives (slideePos) {
    slideePos = within(isNumber(slideePos) ? slideePos : pos.dest, pos.start, pos.end)

    const relatives = {}
    const centerOffset = forceCenteredNav ? 0 : frameSize / 2

    // Determine active page
    if (!parallax) {
      for (let p = 0, pl = pages.length; p < pl; p++) {
        if (slideePos >= pos.end || p === pages.length - 1) {
          relatives.activePage = pages.length - 1
          break
        }

        if (slideePos <= pages[p] + centerOffset) {
          relatives.activePage = p
          break
        }
      }
    }

    // Relative item indexes
    if (itemNav) {
      let first = false
      let last = false
      let center = false

      // From start
      for (let i = 0, il = items.length; i < il; i++) {
        // First item
        if (first === false && slideePos <= items[i].start + items[i].half) {
          first = i
        }

        // Center item
        if (center === false && slideePos <= items[i].center + items[i].half) {
          center = i
        }

        // Last item
        if (i === il - 1 || slideePos <= items[i].end + items[i].half) {
          last = i
          break
        }
      }

      // Safe assignment, just to be sure the false won't be returned
      relatives.firstItem = isNumber(first) ? first : 0
      relatives.centerItem = isNumber(center) ? center : relatives.firstItem
      relatives.lastItem = isNumber(last) ? last : relatives.centerItem
    }

    return relatives
  }

  /**
   * Update object with relative positions.
   *
   * @param {Int} newPos
   *
   * @return {Void}
   */
  function updateRelatives (newPos) {
    $.extend(rel, getRelatives(newPos))
  }

  /**
   * Disable navigation buttons when needed.
   *
   * Adds disabledClass, and when the button is <button> or <input>, activates :disabled state.
   *
   * @return {Void}
   */
  function updateButtonsState () {
    const isStart = pos.dest <= pos.start
    const isEnd = pos.dest >= pos.end
    let slideePosState = (isStart ? 1 : 0) | (isEnd ? 2 : 0)

    // Update paging buttons only if there has been a change in SLIDEE position
    if (last.slideePosState !== slideePosState) {
      last.slideePosState = slideePosState

      if ($prevPageButton.is('button,input')) {
        $prevPageButton.prop('disabled', isStart)
      }

      if ($nextPageButton.is('button,input')) {
        $nextPageButton.prop('disabled', isEnd)
      }

      $prevPageButton.add($backwardButton)[isStart ? 'addClass' : 'removeClass'](o.disabledClass)
      $nextPageButton.add($forwardButton)[isEnd ? 'addClass' : 'removeClass'](o.disabledClass)
    }

    // Forward & Backward buttons need a separate state caching because we cannot "property disable"
    // them while they are being used, as disabled buttons stop emitting mouse events.
    if (last.fwdbwdState !== slideePosState && dragging.released) {
      last.fwdbwdState = slideePosState

      if ($backwardButton.is('button,input')) {
        $backwardButton.prop('disabled', isStart)
      }

      if ($forwardButton.is('button,input')) {
        $forwardButton.prop('disabled', isEnd)
      }
    }

    // Item navigation
    if (itemNav && rel.activeItem != null) {
      const isFirst = rel.activeItem === 0
      const isLast = rel.activeItem >= items.length - 1
      let itemsButtonState = (isFirst ? 1 : 0) | (isLast ? 2 : 0)

      if (last.itemsButtonState !== itemsButtonState) {
        last.itemsButtonState = itemsButtonState

        if ($prevButton.is('button,input')) {
          $prevButton.prop('disabled', isFirst)
        }

        if ($nextButton.is('button,input')) {
          $nextButton.prop('disabled', isLast)
        }

        $prevButton[isFirst ? 'addClass' : 'removeClass'](o.disabledClass)
        $nextButton[isLast ? 'addClass' : 'removeClass'](o.disabledClass)
      }
    }
  }

  /**
   * Resume cycling.
   *
   * @param {Int} priority Resume pause with priority lower or equal than this. Used internally for pauseOnHover.
   *
   * @return {Void}
   */
  self.resume = function (priority) {
    if (!o.cycleBy || !o.cycleInterval || o.cycleBy === 'items' && (!items[0] || rel.activeItem == null) || priority < self.isPaused) {
      return
    }

    self.isPaused = 0

    if (cycleID) {
      cycleID = clearTimeout(cycleID)
    } else {
      trigger('resume')
    }

    cycleID = setTimeout(() => {
      trigger('cycle')
      switch (o.cycleBy) {
        case 'items':
          self.activate(rel.activeItem >= items.length - 1 ? 0 : rel.activeItem + 1)
          break

        case 'pages':
          self.activatePage(rel.activePage >= pages.length - 1 ? 0 : rel.activePage + 1)
          break
      }
    }, o.cycleInterval)
  }

  /**
   * Pause cycling.
   *
   * @param {Int} priority Pause priority. 100 is default. Used internally for pauseOnHover.
   *
   * @return {Void}
   */
  self.pause = function (priority) {
    if (priority < self.isPaused) {
      return
    }

    self.isPaused = priority || 100

    if (cycleID) {
      cycleID = clearTimeout(cycleID)
      trigger('pause')
    }
  }

  /**
   * Toggle cycling.
   *
   * @return {Void}
   */
  self.toggle = function () {
    self[cycleID ? 'pause' : 'resume']()
  }

  /**
   * Updates a signle or multiple option values.
   *
   * @param {Mixed} name  Name of the option that should be updated, or object that will extend the options.
   * @param {Mixed} value New option value.
   *
   * @return {Void}
   */
  self.set = function (name, value) {
    if ($.isPlainObject(name)) {
      $.extend(o, name)
    } else if (o.hasOwnProperty(name)) {
      o[name] = value
    }
  }

  /**
   * Add one or multiple items to the SLIDEE end, or a specified position index.
   *
   * @param {Mixed} element Node element, or HTML string.
   * @param {Int}   index   Index of a new item position. By default item is appended at the end.
   *
   * @return {Void}
   */
  self.add = function (element, index) {
    const $element = $(element)

    if (itemNav) {
      // Insert the element(s)
      if (index == null || !items[0] || index >= items.length) {
        $element.appendTo($slidee)
      } else if (items.length) {
        $element.insertBefore(items[index].el)
      }

      // Adjust the activeItem index
      if (rel.activeItem != null && index <= rel.activeItem) {
        last.active = rel.activeItem += $element.length
      }
    } else {
      $slidee.append($element)
    }

    // Reload
    load()
  }

  /**
   * Remove an item from SLIDEE.
   *
   * @param {Mixed} element Item index, or DOM element.
   * @param {Int}   index   Index of a new item position. By default item is appended at the end.
   *
   * @return {Void}
   */
  self.remove = function (element) {
    if (itemNav) {
      const index = getRelativeIndex(element)

      if (index > -1) {
        // Remove the element
        $items.eq(index).remove()

        // If the current item is being removed, activate new one after reload
        const reactivate = index === rel.activeItem

        // Adjust the activeItem index
        if (rel.activeItem != null && index < rel.activeItem) {
          last.active = --rel.activeItem
        }

        // Reload
        load()

        // Activate new item at the removed position
        if (reactivate) {
          last.active = null
          self.activate(rel.activeItem)
        }
      }
    } else {
      $(element).remove()
      load()
    }
  }

  /**
   * Helps re-arranging items.
   *
   * @param  {Mixed} item     Item DOM element, or index starting at 0. Use negative numbers to select items from the end.
   * @param  {Mixed} position Item insertion anchor. Accepts same input types as item argument.
   * @param  {Bool}  after    Insert after instead of before the anchor.
   *
   * @return {Void}
   */
  function moveItem (item, position, after) {
    item = getRelativeIndex(item)
    position = getRelativeIndex(position)

    // Move only if there is an actual change requested
    if (item > -1 && position > -1 && item !== position && (!after || position !== item - 1) && (after || position !== item + 1)) {
      $items.eq(item)[after ? 'insertAfter' : 'insertBefore'](items[position].el)

      const shiftStart = item < position ? item : (after ? position : position - 1)
      const shiftEnd = item > position ? item : (after ? position + 1 : position)
      const shiftsUp = item > position

      // Update activeItem index
      if (rel.activeItem != null) {
        if (item === rel.activeItem) {
          last.active = rel.activeItem = after ? (shiftsUp ? position + 1 : position) : (shiftsUp ? position : position - 1)
        } else if (rel.activeItem > shiftStart && rel.activeItem < shiftEnd) {
          last.active = rel.activeItem += shiftsUp ? 1 : -1
        }
      }

      // Reload
      load()
    }
  }

  /**
   * Move item after the target anchor.
   *
   * @param  {Mixed} item     Item to be moved. Can be DOM element or item index.
   * @param  {Mixed} position Target position anchor. Can be DOM element or item index.
   *
   * @return {Void}
   */
  self.moveAfter = function (item, position) {
    moveItem(item, position, 1)
  }

  /**
   * Move item before the target anchor.
   *
   * @param  {Mixed} item     Item to be moved. Can be DOM element or item index.
   * @param  {Mixed} position Target position anchor. Can be DOM element or item index.
   *
   * @return {Void}
   */
  self.moveBefore = function (item, position) {
    moveItem(item, position)
  }

  /**
   * Registers callbacks.
   *
   * @param  {Mixed} name  Event name, or callbacks map.
   * @param  {Mixed} fn    Callback, or an array of callback functions.
   *
   * @return {Void}
   */
  self.on = function (name, fn) {
    // Callbacks map
    if (type(name) === 'object') {
      for (const key in name) {
        if (name.hasOwnProperty(key)) {
          self.on(key, name[key])
        }
      }
    // Callback
    } else if (type(fn) === 'function') {
      const names = name.split(' ')
      for (let n = 0, nl = names.length; n < nl; n++) {
        callbacks[names[n]] = callbacks[names[n]] || []
        if (callbackIndex(names[n], fn) === -1) {
          callbacks[names[n]].push(fn)
        }
      }
    // Callbacks array
    } else if (type(fn) === 'array') {
      for (let f = 0, fl = fn.length; f < fl; f++) {
        self.on(name, fn[f])
      }
    }
  }

  /**
   * Registers callbacks to be executed only once.
   *
   * @param  {Mixed} name  Event name, or callbacks map.
   * @param  {Mixed} fn    Callback, or an array of callback functions.
   *
   * @return {Void}
   */
  self.one = function (name, fn) {
    function proxy () {
      fn.apply(self, arguments)
      self.off(name, proxy)
    }
    self.on(name, proxy)
  }

  /**
   * Remove one or all callbacks.
   *
   * @param  {String} name Event name.
   * @param  {Mixed}  fn   Callback, or an array of callback functions. Omit to remove all callbacks.
   *
   * @return {Void}
   */
  self.off = function (name, fn) {
    if (fn instanceof Array) {
      for (let f = 0, fl = fn.length; f < fl; f++) {
        self.off(name, fn[f])
      }
    } else {
      const names = name.split(' ')
      for (let n = 0, nl = names.length; n < nl; n++) {
        callbacks[names[n]] = callbacks[names[n]] || []
        if (fn == null) {
          callbacks[names[n]].length = 0
        } else {
          const index = callbackIndex(names[n], fn)
          if (index !== -1) {
            callbacks[names[n]].splice(index, 1)
          }
        }
      }
    }
  }

  /**
   * Returns callback array index.
   *
   * @param  {String}   name Event name.
   * @param  {Function} fn   Function
   *
   * @return {Int} Callback array index, or -1 if isn't registered.
   */
  function callbackIndex (name, fn) {
    for (let i = 0, l = callbacks[name].length; i < l; i++) {
      if (callbacks[name][i] === fn) {
        return i
      }
    }
    return -1
  }

  /**
   * Reset next cycle timeout.
   *
   * @return {Void}
   */
  function resetCycle () {
    if (dragging.released && !self.isPaused) {
      self.resume()
    }
  }

  /**
   * Calculate SLIDEE representation of handle position.
   *
   * @param  {Int} handlePos
   *
   * @return {Int}
   */
  function handleToSlidee (handlePos) {
    return round(within(handlePos, hPos.start, hPos.end) / hPos.end * (pos.end - pos.start)) + pos.start
  }

  /**
   * Keeps track of a dragging delta history.
   *
   * @return {Void}
   */
  function draggingHistoryTick () {
    // Looking at this, I know what you're thinking :) But as we need only 4 history states, doing it this way
    // as opposed to a proper loop is ~25 bytes smaller (when minified with GCC), a lot faster, and doesn't
    // generate garbage. The loop version would create 2 new variables on every tick. Unexaptable!
    dragging.history[0] = dragging.history[1]
    dragging.history[1] = dragging.history[2]
    dragging.history[2] = dragging.history[3]
    dragging.history[3] = dragging.delta
  }

  /**
   * Initialize continuous movement.
   *
   * @return {Void}
   */
  function continuousInit (source) {
    dragging.released = 0
    dragging.source = source
    dragging.slidee = source === 'slidee'
  }

  /**
   * Dragging initiator.
   *
   * @param  {Event} event
   *
   * @return {Void}
   */
  function dragInit (event) {
    const isTouch = event.type === 'touchstart'
    const source = event.data.source
    const isSlidee = source === 'slidee'

    // Ignore when already in progress, or interactive element in non-touch navivagion
    if (dragging.init || !isTouch && isInteractive(event.target)) {
      return
    }

    // Handle dragging conditions
    if (source === 'handle' && (!o.dragHandle || hPos.start === hPos.end)) {
      return
    }

    // SLIDEE dragging conditions
    if (isSlidee && !(isTouch ? o.touchDragging : o.mouseDragging && event.which < 2)) {
      return
    }

    if (!isTouch) {
      // prevents native image dragging in Firefox
      stopDefault(event)
    }

    // Reset dragging object
    continuousInit(source)

    // Properties used in dragHandler
    dragging.init = 0
    dragging.$source = $(event.target)
    dragging.touch = isTouch
    dragging.pointer = isTouch ? event.originalEvent.touches[0] : event
    dragging.initX = dragging.pointer.pageX
    dragging.initY = dragging.pointer.pageY
    dragging.initPos = isSlidee ? pos.cur : hPos.cur
    dragging.start = +new Date()
    dragging.time = 0
    dragging.path = 0
    dragging.delta = 0
    dragging.locked = 0
    dragging.history = [0, 0, 0, 0]
    dragging.pathToLock = isSlidee ? isTouch ? 30 : 10 : 0

    // Bind dragging events
    $doc.on(isTouch ? dragTouchEvents : dragMouseEvents, dragHandler)

    // Pause ongoing cycle
    self.pause(1)

    // Add dragging class
    ;(isSlidee ? $slidee : $handle).addClass(o.draggedClass)

    // Trigger moveStart event
    trigger('moveStart')

    // Keep track of a dragging path history. This is later used in the
    // dragging release swing calculation when dragging SLIDEE.
    if (isSlidee) {
      historyID = setInterval(draggingHistoryTick, 10)
    }
  }

  /**
   * Handler for dragging scrollbar handle or SLIDEE.
   *
   * @param  {Event} event
   *
   * @return {Void}
   */
  function dragHandler (event) {
    dragging.released = event.type === 'mouseup' || event.type === 'touchend'
    dragging.pointer = dragging.touch ? event.originalEvent[dragging.released ? 'changedTouches' : 'touches'][0] : event
    dragging.pathX = dragging.pointer.pageX - dragging.initX
    dragging.pathY = dragging.pointer.pageY - dragging.initY
    dragging.path = sqrt(pow(dragging.pathX, 2) + pow(dragging.pathY, 2))
    dragging.delta = o.horizontal ? dragging.pathX : dragging.pathY

    if (!dragging.released && dragging.path < 1) return

    // We haven't decided whether this is a drag or not...
    if (!dragging.init) {
      // If the drag path was very short, maybe it's not a drag?
      if (dragging.path < o.dragThreshold) {
        // If the pointer was released, the path will not become longer and it's
        // definitely not a drag. If not released yet, decide on next iteration
        return dragging.released ? dragEnd() : undefined
      } else {
        // If dragging path is sufficiently long we can confidently start a drag
        // if drag is in different direction than scroll, ignore it
        if (o.horizontal ? abs(dragging.pathX) > abs(dragging.pathY) : abs(dragging.pathX) < abs(dragging.pathY)) {
          dragging.init = 1
        } else {
          return dragEnd()
        }
      }
    }

    stopDefault(event)

    // Disable click on a source element, as it is unwelcome when dragging
    if (!dragging.locked && dragging.path > dragging.pathToLock && dragging.slidee) {
      dragging.locked = 1
      dragging.$source.on(clickEvent, disableOneEvent)
    }

    // Cancel dragging on release
    if (dragging.released) {
      dragEnd()

      // Adjust path with a swing on mouse release
      if (o.releaseSwing && dragging.slidee) {
        dragging.swing = (dragging.delta - dragging.history[0]) / 40 * 300
        dragging.delta += dragging.swing
        dragging.tweese = abs(dragging.swing) > 10
      }
    }

    slideTo(
              dragging.slidee ? round(dragging.initPos - dragging.delta) : handleToSlidee(dragging.initPos + dragging.delta)
          )
  }

  /**
   * Stops dragging and cleans up after it.
   *
   * @return {Void}
   */
  function dragEnd () {
    clearInterval(historyID)
    dragging.released = true
    $doc.off(dragging.touch ? dragTouchEvents : dragMouseEvents, dragHandler)
    ;(dragging.slidee ? $slidee : $handle).removeClass(o.draggedClass)

    // Make sure that disableOneEvent is not active in next tick.
    setTimeout(() => {
      dragging.$source.off(clickEvent, disableOneEvent)
    })

    // Normally, this is triggered in render(), but if there
    // is nothing to render, we have to do it manually here.
    if (pos.cur === pos.dest && dragging.init) {
      trigger('moveEnd')
    }

    // Resume ongoing cycle
    self.resume(1)

    dragging.init = 0
  }

  /**
   * Check whether element is interactive.
   *
   * @return {Boolean}
   */
  function isInteractive (element) {
    return ~$.inArray(element.nodeName, interactiveElements) || $(element).is(o.interactive)
  }

  /**
   * Continuous movement cleanup on mouseup.
   *
   * @return {Void}
   */
  function movementReleaseHandler () {
    self.stop()
    $doc.off('mouseup', movementReleaseHandler)
  }

  /**
   * Buttons navigation handler.
   *
   * @param  {Event} event
   *
   * @return {Void}
   */
  function buttonsHandler (event) {
    stopDefault(event)
    switch (this) {
      case $forwardButton[0]:
      case $backwardButton[0]:
        self.moveBy($forwardButton.is(this) ? o.moveBy : -o.moveBy)
        $doc.on('mouseup', movementReleaseHandler)
        break

      case $prevButton[0]:
        self.prev()
        break

      case $nextButton[0]:
        self.next()
        break

      case $prevPageButton[0]:
        self.prevPage()
        break

      case $nextPageButton[0]:
        self.nextPage()
        break
    }
  }

  /**
   * Mouse wheel delta normalization.
   *
   * @param  {Event} event
   *
   * @return {Int}
   */
  function normalizeWheelDelta (event) {
    // wheelDelta needed only for IE8-
    scrolling.curDelta = (o.horizontal ? event.deltaY || event.deltaX : event.deltaY) || -event.wheelDelta
    scrolling.curDelta /= event.deltaMode === 1 ? 3 : 100
    if (!itemNav) {
      return scrolling.curDelta
    }
    time = +new Date()
    if (scrolling.last < time - scrolling.resetTime) {
      scrolling.delta = 0
    }
    scrolling.last = time
    scrolling.delta += scrolling.curDelta
    if (abs(scrolling.delta) < 1) {
      scrolling.finalDelta = 0
    } else {
      scrolling.finalDelta = round(scrolling.delta / 1)
      scrolling.delta %= 1
    }
    return scrolling.finalDelta
  }

  /**
   * Mouse scrolling handler.
   *
   * @param  {Event} event
   *
   * @return {Void}
   */
  function scrollHandler (event) {
    // Mark event as originating in a Sly instance
    event.originalEvent[namespace] = self
    // Don't hijack global scrolling
    const time = +new Date()
    if (lastGlobalWheel + o.scrollHijack > time && $scrollSource[0] !== document && $scrollSource[0] !== window) {
      lastGlobalWheel = time
      return
    }
    // Ignore if there is no scrolling to be done
    if (!o.scrollBy || pos.start === pos.end) {
      return
    }
    const delta = normalizeWheelDelta(event.originalEvent)
    // Trap scrolling only when necessary and/or requested
    if (o.scrollTrap || delta > 0 && pos.dest < pos.end || delta < 0 && pos.dest > pos.start) {
      stopDefault(event, 1)
    }
    self.slideBy(o.scrollBy * delta)
  }

  /**
   * Scrollbar click handler.
   *
   * @param  {Event} event
   *
   * @return {Void}
   */
  function scrollbarHandler (event) {
    // Only clicks on scroll bar. Ignore the handle.
    if (o.clickBar && event.target === $sb[0]) {
      stopDefault(event)
      // Calculate new handle position and sync SLIDEE to it
      slideTo(
                  handleToSlidee((o.horizontal ? event.pageX - $sb.offset().left : event.pageY - $sb.offset().top) - handleSize / 2)
              )
    }
  }

  /**
   * Keyboard input handler.
   *
   * @param  {Event} event
   *
   * @return {Void}
   */
  function keyboardHandler (event) {
    if (!o.keyboardNavBy) {
      return
    }

    switch (event.which) {
      // Left or Up
      case o.horizontal ? 37 : 38:
        stopDefault(event)
        self[o.keyboardNavBy === 'pages' ? 'prevPage' : 'prev']()
        break

      // Right or Down
      case o.horizontal ? 39 : 40:
        stopDefault(event)
        self[o.keyboardNavBy === 'pages' ? 'nextPage' : 'next']()
        break
    }
  }

  /**
   * Click on item activation handler.
   *
   * @param  {Event} event
   *
   * @return {Void}
   */
  function activateHandler (event) {
    // Ignore clicks on interactive elements.
    if (isInteractive(this)) {
      event.originalEvent[`${namespace}ignore`] = true
      return
    }

    // Ignore events that:
    // - are not originating from direct SLIDEE children
    // - originated from interactive elements
    if (this.parentNode !== $slidee[0] || event.originalEvent[`${namespace}ignore`]) return

    self.activate(this)
  }

  /**
   * Click on page button handler.
   *
   * @param {Event} event
   *
   * @return {Void}
   */
  function activatePageHandler () {
    // Accept only events from direct pages bar children.
    if (this.parentNode === $pb[0]) {
      self.activatePage($pages.index(this))
    }
  }

  /**
   * Pause on hover handler.
   *
   * @param  {Event} event
   *
   * @return {Void}
   */
  function pauseOnHoverHandler (event) {
    if (o.pauseOnHover) {
      self[event.type === 'mouseenter' ? 'pause' : 'resume'](2)
    }
  }

  /**
   * Trigger callbacks for event.
   *
   * @param  {String} name Event name.
   * @param  {Mixed}  argX Arguments passed to callbacks.
   *
   * @return {Void}
   */
  function trigger (name, arg1) {
    if (callbacks[name]) {
      l = callbacks[name].length
      // Callbacks will be stored and executed from a temporary array to not
      // break the execution queue when one of the callbacks unbinds itself.
      tmpArray.length = 0
      for (i = 0; i < l; i++) {
        tmpArray.push(callbacks[name][i])
      }
      // Execute the callbacks
      for (i = 0; i < l; i++) {
        tmpArray[i].call(self, name, arg1)
      }
    }
  }

  /**
   * Destroys instance and everything it created.
   *
   * @return {Void}
   */
  self.destroy = function () {
    // Remove the reference to itself
    Sly.removeInstance(frame)

    // Unbind all events
    $scrollSource
      .add($handle)
      .add($sb)
      .add($pb)
      .add($forwardButton)
      .add($backwardButton)
      .add($prevButton)
      .add($nextButton)
      .add($prevPageButton)
      .add($nextPageButton)
      .off(`.${namespace}`)

    // Unbinding specifically as to not nuke out other instances
    $doc.off('keydown', keyboardHandler)

    // Remove classes
    $prevButton
      .add($nextButton)
      .add($prevPageButton)
      .add($nextPageButton)
      .removeClass(o.disabledClass)

    if ($items && rel.activeItem != null) {
      $items.eq(rel.activeItem).removeClass(o.activeClass)
    }

    // Remove page items
    $pb.empty()

    if (!parallax) {
      // Unbind events from frame
      $frame.off(`.${namespace}`)
      // Restore original styles
      frameStyles.restore()
      slideeStyles.restore()
      sbStyles.restore()
      handleStyles.restore()
      // Remove the instance from element data storage
      $.removeData(frame, namespace)
    }

    // Clean up collections
    items.length = pages.length = 0
    last = {}

    // Reset initialized status and return the instance
    self.initialized = 0
    return self
  }

  /**
   * Initialize.
   *
   * @return {Object}
   */
  self.init = function () {
    if (self.initialized) {
      return
    }

    // Disallow multiple instances on the same element
    if (Sly.getInstance(frame)) throw new Error('There is already a Sly instance on this element')

    // Store the reference to itself
    Sly.storeInstance(frame, self)

    // Register callbacks map
    self.on(callbackMap)

    // Save styles
    const holderProps = ['overflow', 'position']
    const movableProps = ['position', 'webkitTransform', 'msTransform', 'transform', 'left', 'top', 'width', 'height']
    frameStyles.save.apply(frameStyles, holderProps)
    sbStyles.save.apply(sbStyles, holderProps)
    slideeStyles.save.apply(slideeStyles, movableProps)
    handleStyles.save.apply(handleStyles, movableProps)

    // Set required styles
    let $movables = $handle
    if (!parallax) {
      $movables = $movables.add($slidee)
      $frame.css('overflow', 'hidden')
      if (!transform && $frame.css('position') === 'static') {
        $frame.css('position', 'relative')
      }
    }
    if (transform) {
      if (gpuAcceleration) {
        $movables.css(transform, gpuAcceleration)
      }
    } else {
      if ($sb.css('position') === 'static') {
        $sb.css('position', 'relative')
      }
      $movables.css({ position: 'absolute' })
    }

    // Navigation buttons
    if (o.forward) {
      $forwardButton.on(mouseDownEvent, buttonsHandler)
    }
    if (o.backward) {
      $backwardButton.on(mouseDownEvent, buttonsHandler)
    }
    if (o.prev) {
      $prevButton.on(clickEvent, buttonsHandler)
    }
    if (o.next) {
      $nextButton.on(clickEvent, buttonsHandler)
    }
    if (o.prevPage) {
      $prevPageButton.on(clickEvent, buttonsHandler)
    }
    if (o.nextPage) {
      $nextPageButton.on(clickEvent, buttonsHandler)
    }

    // Scrolling navigation
    $scrollSource.on(wheelEvent, scrollHandler)

    // Clicking on scrollbar navigation
    if ($sb[0]) {
      $sb.on(clickEvent, scrollbarHandler)
    }

    // Click on items navigation
    if (itemNav && o.activateOn) {
      $frame.on(`${o.activateOn}.${namespace}`, '*', activateHandler)
    }

    // Pages navigation
    if ($pb[0] && o.activatePageOn) {
      $pb.on(`${o.activatePageOn}.${namespace}`, '*', activatePageHandler)
    }

    // Dragging navigation
    $dragSource.on(dragInitEvents, { source: 'slidee' }, dragInit)

    // Scrollbar dragging navigation
    if ($handle) {
      $handle.on(dragInitEvents, { source: 'handle' }, dragInit)
    }

    // Keyboard navigation
    $doc.on('keydown', keyboardHandler)

    if (!parallax) {
      // Pause on hover
      $frame.on(`mouseenter.${namespace} mouseleave.${namespace}`, pauseOnHoverHandler)
      // Reset native FRAME element scroll
      $frame.on(`scroll.${namespace}`, resetScroll)
    }

    // Mark instance as initialized
    self.initialized = 1

    // Load
    load(true)

    // Initiate automatic cycling
    if (o.cycleBy && !parallax) {
      self[o.startPaused ? 'pause' : 'resume']()
    }

    // Return instance
    return self
  }
}

Sly.getInstance = function (element) {
  return $.data(element, namespace)
}

Sly.storeInstance = function (element, sly) {
  return $.data(element, namespace, sly)
}

Sly.removeInstance = function (element) {
  return $.removeData(element, namespace)
}

/**
 * Return type of the value.
 *
 * @param  {Mixed} value
 *
 * @return {String}
 */
function type (value) {
  if (value == null) {
    return String(value)
  }

  if (typeof value === 'object' || typeof value === 'function') {
    return Object.prototype.toString.call(value).match(/\s([a-z]+)/i)[1].toLowerCase() || 'object'
  }

  return typeof value
}

/**
 * Event preventDefault & stopPropagation helper.
 *
 * @param {Event} event     Event object.
 * @param {Bool}  noBubbles Cancel event bubbling.
 *
 * @return {Void}
 */
function stopDefault (event, noBubbles) {
  event.preventDefault()
  if (noBubbles) {
    event.stopPropagation()
  }
}

/**
 * Disables an event it was triggered on and unbinds itself.
 *
 * @param  {Event} event
 *
 * @return {Void}
 */
function disableOneEvent (event) {
  stopDefault(event, 1)
  $(this).off(event.type, disableOneEvent)
}

/**
 * Resets native element scroll values to 0.
 *
 * @return {Void}
 */
function resetScroll () {
  this.scrollLeft = 0
  this.scrollTop = 0
}

/**
 * Check if variable is a number.
 *
 * @param {Mixed} value
 *
 * @return {Boolean}
 */
function isNumber (value) {
  return !isNaN(parseFloat(value)) && isFinite(value)
}

/**
 * Parse style to pixels.
 *
 * @param {Object}   $item    jQuery object with element.
 * @param {Property} property CSS property to get the pixels from.
 *
 * @return {Int}
 */
function getPx ($item, property) {
  return 0 | round(String($item.css(property)).replace(/[^\-0-9.]/g, ''))
}

/**
 * Make sure that number is within the limits.
 *
 * @param {Number} number
 * @param {Number} min
 * @param {Number} max
 *
 * @return {Number}
 */
function within (number, min, max) {
  return number < min ? min : number > max ? max : number
}

/**
 * Saves element styles for later restoration.
 *
 * Example:
 *   var styles = new StyleRestorer(frame)
 *   styles.save('position')
 *   element.style.position = 'absolute'
 *   styles.restore() // restores to state before the assignment above
 *
 * @param {Element} element
 */
function StyleRestorer (element) {
  const self = {}
  self.style = {}
  self.save = function () {
    if (!element || !element.nodeType) return
    for (let i = 0; i < arguments.length; i++) {
      self.style[arguments[i]] = element.style[arguments[i]]
    }
    return self
  }
  self.restore = function () {
    if (!element || !element.nodeType) return
    for (let prop in self.style) {
      if (self.style.hasOwnProperty(prop)) element.style[prop] = self.style[prop]
    }
    return self
  }
  return self
}

// Local WindowAnimationTiming interface polyfill
;(w => {
  rAF = w.requestAnimationFrame || w.webkitRequestAnimationFrame || fallback

  /**
  * Fallback implementation.
  */
  let prev = new Date().getTime()
  function fallback (fn) {
    const curr = new Date().getTime()
    const ms = Math.max(0, 16 - (curr - prev))
    const req = setTimeout(fn, ms)
    prev = curr
    return req
  }

  /**
  * Cancel.
  */
  const cancel = w.cancelAnimationFrame || w.webkitCancelAnimationFrame ||
  w.clearTimeout

  cAF = function (id) {
    cancel.call(w, id)
  }
})(window)

// Feature detects
;(() => {
  const prefixes = ['', 'Webkit', 'Moz', 'ms', 'O']
  const el = document.createElement('div')

  function testProp (prop) {
    for (let p = 0, pl = prefixes.length; p < pl; p++) {
      const prefixedProp = prefixes[p] ? prefixes[p] + prop.charAt(0).toUpperCase() + prop.slice(1) : prop
      if (el.style[prefixedProp] != null) {
        return prefixedProp
      }
    }
  }

  // Global support indicators
  transform = testProp('transform')
  gpuAcceleration = testProp('perspective') ? 'translateZ(0) ' : ''
})()
// Default options
Sly.defaults = defaults

export default Sly