Overview

© 2017 by Gregor Adams

Design

© 2017 by Gregor Adams

Installation

• yarn
• npm

yarn

yarn add paraglider

npm

npm install paraglider --save

© 2017 by Gregor Adams

Tutorial

© 2017 by Gregor Adams

Usage

• Wrappers
  • Wrapper
  • Multi wrapper
• Presets
  • Belt
  • Multi belt
  • Cover

import Glider from 'paraglider'

// A simple belt slider
const glider = new Glider({
  onSlide(progress, {next, previous, current, rest}, slides) {
    if (previous !== null) {
      slides[previous].style.transform = `translate3d(${-100 + (progress * 100)}%,0,0)`
      slides[current].style.transform = `translate3d(${(progress * 100)}%,0,0)`
    } else if (next !== null) {
      slides[next].style.transform = `translate3d(${100 - (progress * 100)}%,0,0)`
      slides[current].style.transform = `translate3d(${(progress * -100)}%,0,0)`
    }
  },
  onEnd({next, previous, current, rest}, slides) {
    rest.forEach(slide => {
      slides[slide].style.transform = ''
    })
    slides[current].style.transform = ''
    slides[previous].style.transform = 'translate3d(-100%,0,0)'
    slides[next].style.transform = 'translate3d(100%,0,0)'
  }
})
glider.init(document.querySelector('.glide-me'))

Wrappers

Wrapper

If you want to wrap your slider to use pagers and/or navigation you can use the provided helper. The API and configuration remains the same.

import wrapper from 'paraglider/lib/presets/wrapper'

const belt = (glider, opts) => wrapper(glider, {
  ...opts,
  onSlide(progress, {next, previous, current, rest}, slides) {
    if (previous !== null) {
      slides[previous].style.transform = `translate3d(${-100 + (progress * 100)}%,0,0)`
      slides[current].style.transform = `translate3d(${(progress * 100)}%,0,0)`
    } else if (next !== null) {
      slides[next].style.transform = `translate3d(${100 - (progress * 100)}%,0,0)`
      slides[current].style.transform = `translate3d(${(progress * -100)}%,0,0)`
    }
    if (typeof opts.onSlide === 'function') {
      opts.onSlide(progress, {next, previous, current, rest}, slides)
    }
  },
  onEnd({next, previous, current, rest}, slides) {
    [next, previous, ...rest].forEach(slide => {
      slides[slide].style.transform = 'translate3d(-100%,0,0)'
    })
    slides[current].style.transform = ''
    if (typeof opts.onEnd === 'function') {
      opts.onEnd({next, previous, current, rest}, slides)
    }
  }
})

Multi wrapper

Allows using slideBy and visibleSlides in a wrapper. (No pager dots)

import multiWrapper from 'paraglider/lib/presets/multi-wrapper'

const multiBelt = (glider, opts) => multiWrapper(glider, {
  ...opts,
  onInit({next, previous, current, rest}, slides) {
    current.forEach((id, index) => {
      slides[id].style.transform = `translate3d(${index * 100}%,0,0)`
    })
  },
  onSlide(progress, {next, previous, current, rest}, slides, {slideBy}) {
    if (previous !== null) {
      if (current.length > 0) {
        current.forEach((id, index) => {
          slides[id].style.transform = `translate3d(${(index * 100) + (progress * 100)}%,0,0)`
        })
      } else {
        slides[current].style.transform = `translate3d(${progress * 100}%,0,0)`
      }
      if (previous.length > 0) {
        previous.forEach((id, index) => {
          slides[id].style.transform = `translate3d(${((slideBy - 1) * -100) + (index * 100) + (progress * 100) - 100}%,0,0)`
        })
      } else {
        slides[previous].style.transform = `translate3d(${(progress * 100) - 100}%,0,0)`
      }
    } else if (next !== null) {
      if (current.length > 0) {
        current.forEach((id, index) => {
          slides[id].style.transform = `translate3d(${(index * 100) - (progress * 100)}%,0,0)`
        })
      } else {
        slides[current].style.transform = `translate3d(${(progress * -100)}%,0,0)`
      }
      if (next.length > 0) {
        next.forEach((id, index) => {
          slides[id].style.transform = `translate3d(${(slideBy * 100) + (index * 100) - (progress * 100)}%,0,0)`
        })
      } else {
        slides[next].style.transform = `translate3d(${100 - (progress * 100)}%,0,0)`
      }
    }
  },
  onEnd({next, previous, current, rest}, slides) {
    const currentIndexes = current.length > 0 ? current : current ? current : []
    slides.filter((id, i) => currentIndexes.indexOf(i) > -1).forEach(slide => {
      slide.style.transform = 'translate3d-1%,0,0)'
    })
    current.forEach((id, index) => {
      slides[id].style.transform = `translate3d(${index * 100}%,0,0)`
    })
  }
})

Presets

Belt

A simple belt slider

import {belt} from 'paraglider/presets'

belt(document.querySelector('.belt'))

Multi belt

A belt slider that allows having multiple visible slides.

import {multiBelt} from 'paraglider/presets'

multiBelt(document.querySelector('.belt', {visibleItems: 2}))

Cover

Covers the current slide.

import {coverRight, coverLeft, coverLeftRight} from 'paraglider/presets'

coverLeft(document.querySelector('.coverLeft'))
coverRight(document.querySelector('.coverRight'))
coverLeftRight(document.querySelector('.coverLeftRight'))

© 2017 by Gregor Adams

Configuration

• Class names
• Options
  • Loop
  • Visible slides
  • Amount of next slides
  • Enable Touch
  • Enable Swipe
  • Initial slide
  • Threshold
  • Snap back
    • Speed and duration
  • Add classes
• Callbacks
  • Initialized
  • Destroyed
  • Sliding
  • Finished

Class names

• {object} classNames
  • Mapping of class names to be used by the plugin.
• {string} [classNames.pluginLoaded='pluginLoaded']
  • Applied when the plugin has been loaded
• {string} [classNames.init='init']
  • Applied when the plugin has been initialized. Removed on first interaction.
• {string} [classNames.slides='slides']
  • This element will be used to track touches. This is the wrapper around the slides.
• {string} [classNames.slide='slide']
  • Selector for each single slide.
• {string} [classNames.current='current']
  • Applied to the currently visible slide
• {string} [classNames.previous='previous']
  • Applied to the previous slide in the queue
• {string} [classNames.next='next']
  • Applied to the next slide in the queue
• {object} addClasses
  • Map of class names to be added to slides.
• {object} [addClasses.previous=true]
  • Sets previous class name to slides.
• {object} [addClasses.current=true]
  • Sets current class name to slides.
• {object} [addClasses.next=true]
  • Sets next class name to slides.
• {object} addMultiClasses
  • Map of class names to be added to slides using a counter.
• {object} [addMultiClasses.previous=undefined]
  • Sets previous class name to slides using a counter.
• {object} [addMultiClasses.current]
  • Sets current class name to slides using a counter.
• {object} [addMultiClasses.next=undefined]
  • Sets next class name to slides using a counter.

Options

• {boolean} [enableTouch=true]
  • Enable touch interaction.
• {boolean} [enableSwipe=true]
  • Enable mouse/drag/swipe interaction.
• {boolean} [loop=false]
  • Enable looping slides.
• {number} [speed=250]
  • Animation duration when using paging.
• {number} [spring=100]
  • Animation duration when snapping.
• {number} [snapBackAt=0.25]
  • Amount of distance needed to snap. [0, 1]
• {number} [threshold=10]
  • Threshold of pixels until the sliding mechanisms is triggered.
• {number} [initialSlide=0]
  • Initially visible slide
• {number} [visibleSlides=1]
  • Amount of visible slides
• {number} [slideBy=1]
  • Amount of slides to slide on interaction

Loop

[loop=true] {boolean}

Looping can be disabled with this flag.

Warning! This does not work well when visibleSlides > 1.
Issue reports welcome
Contributions welcome

import {belt} from 'paraglider/presets'

belt(document.querySelector('.belt'), {loop: false})

Visible slides

[visibleSLides=1] {number}

Show more than one slide.

Warning! This does not work well when loop === false.
Issue reports welcome
Contributions welcome

import {multiBelt} from 'paraglider/presets'

multiBelt(document.querySelector('.belt'), {visibleSlides: 3})

Amount of next slides

[slideBy=1] {number}

Allows sliding by more than one item.

Warning! Requires visibleSlides >= slideBy.

import {multiBelt} from 'paraglider/presets'

multiBelt(document.querySelector('.belt'), {visibleSlides: 3})

Enable Touch

[enableSwipe=true] {boolean}

Disable or enable swiping with touch.

import {belt} from 'paraglider/presets'

belt(document.querySelector('.belt'), {enableTouch: false})

Enable Swipe

[enableSwipe=true] {boolean}

Disable or enable swiping with the mouse.

import {belt} from 'paraglider/presets'

belt(document.querySelector('.belt'), {enableSwipe: false})

Initial slide

[initialSlide=0] {boolean}

Set the initially active slide

import {belt} from 'paraglider/presets'

belt(document.querySelector('.belt'), {initialSlide: 1})

Threshold

[threshold=10] {number}

Pixel value before swiping will activate (helps on iOS to optimize scrolling).

Warning! Creates a minor jump depending on the value.
10px seems to be default for most developers and similar plugins.

import {multiBelt} from 'paraglider/presets'

multiBelt(document.querySelector('.belt'), {threshold: 5})

Snap back

[snapBackAt=0.25] {number}

Progress needed to snap to the next slide. [0, 1]

import {multiBelt} from 'paraglider/presets'

multiBelt(document.querySelector('.belt'), {snapBackAt: 0.5})

Speed and duration

[speed=250] {number}

Speed defines the time the animation takes when nextSlide or prevSlide are called.

[spring=100] {number}

Spring defines the time the animation takes when touch or mouse interaction is stopped (touchend, mouseup)

import {belt} from 'paraglider/presets'

belt(document.querySelector('.belt'), {speed: 1000, spring: 300})

Add classes

addClasses {object}

• previous {boolean}
• current {boolean}
• next {boolean}

Allows defining if class names should be added to the slides.

addMultiClasses {object}

• previous {boolean}
• current {boolean}
• next {boolean}

Allows defining if class names should be added to the slides if multiple are visible.

current__0, current__1, ...

import {belt} from 'paraglider/presets'

belt(document.querySelector('.belt'), {addClasses: {current: true}})

Callbacks

• {(null|onInit)} [onInit=null]
  • Callback when the slider has been created.
• {(null|onDestroy)} [onDestroy=null]
  • Callback when the slider has been destroyed.
• {(null|onSlide)} [onSlide=null]
  • Callback while the slider is moving.
• {(null|onEnd)} [onEnd=null]
  • Callback while the slider stopped moving.

Initialized

[onInit=null] {null|function}

Defaults to null and does nothing. Can be a function with parameters

import Glider from 'paraglider'

const glider = new Glider({
  onInit({previous, current, next, rest}, slides, options) {
    slides[current].style.transform = 'translate3d(0,0,0)'
  }
})

Destroyed

[onDestroy=null] {null|function}

Defaults to null and does nothing. Can be a function

import Glider from 'paraglider'

const glider = new Glider({
  onDestroy() {
    // ...
  }
})

Sliding

[onSlide=null] {null|function}

Defaults to null and does nothing. Can be a function with parameters

import Glider from 'paraglider'

const glider = new Glider({
  onSlide(progress, {previous, current, next, rest}, slides, options) {
    slides[current].style.transform = 'translate3d(${100 * progress}%,0,0)'
    // ...
  }
})

Finished

[onEnd=null] {null|function}

Defaults to null and does nothing. Can be a function with parameters

import Glider from 'paraglider'

const glider = new Glider({
  onEnd({previous, current, next, rest}, slides, options) {
    slides[current].style.transform = 'translate3d(0,0,0)'
  }
})

© 2017 by Gregor Adams

Advanced

© 2017 by Gregor Adams

Example

• Demos
• Codepen

Take a look at the examples. (Demo)

Demos

• Main Examples
• Main Demo

Codepen

• timelineMax: example on CodePen.
• Bodymovin: example on CodePen.
• Flubber: example on CodePen.

© 2017 by Gregor Adams

References

FAQ

1. Does this work in internet Explorer 9?
   • Maybe, I haven't tested it.
2. Does this work with other Plugins?
   • Yes, especially if they are timeline based.
   • timelineMax: example on CodePen.
   • Bodymovin: example on CodePen.
   • Flubber: example on CodePen.
3. If I create examples will you list them here?
   • Yes definitely, simply create a pull request and add it to the manual/EXAMPLE.md file

© 2017 by Gregor Adams

1.0.0 (2017-06-02)

Bug Fixes

• presets: direction on belt (8aaecb5)

Features

• alpha: alpha version of plugin (00606be)
• presets: added slider presets (38461b1)