Nominally Patriotic Meathead

    slideer

    0.0.7 • Public • Published

    Slideer

    Simple wrapper to create sliders focused on animations. This project is a fork of slider-manager originally created by Baptiste Briel.

    Installation

    Prerequisites: Node.js (>=4.x, 6.x preferred) and Git.

    Using yarn:

    yarn add slideer
    

    Using npm:

    npm install slideer --save`
    

    Usage

    import Slideer from 'slideer'
    import gsap from 'gsap'
     
    const slideWrap = document.getElementById('#slider')
    const slides = Array.from(slideWrap.querySelectorAll('.slides'))
     
    const slider = new Slideer(slideWrap, {
        length: slides.length,
        loop: true,
        callback: (event) => {
            
            const index = event.current // array index
            const previous = event.previous // array index
            const direction = event.direction // +1 for next, -1 for prev
     
            slider.animating = true
     
            const windowWidth = window.innerWidth
            const tl = new TimelineMax({ paused: true, onComplete: () => {
                slider.animating = false
            }})
     
            tl.staggerTo(slides, 1, { cycle: {
                y: (loop) => index === loop ? 0 : windowWidth * direction
            }, ease: Expo.easeInOut}, 0, 0)
     
            tl.restart()
        }
    })
     
    // remember to initialize slider
    slider.init()
     
    // if you have pagination buttons
    const prevControl = document.querySelector('.btn-prev')
    const nextControl = document.querySelector('.btn-next')
     
    // automatic check for loop or limit reached
    prevControl.addEventListener('click', slider.goTo.call(slider, slider.getCurrentSlide() - 1), false)
    nextControl.addEventListener('click', slider.goTo.call(slider, slider.getCurrentSlide() + 1), false)
     

    element

    • el: slider wrapper element to attach swipe event

    options

    • loop: true of false
    • delta: delta limiter for swipe events
    • callback: function called when user has swiped or scrolled

    methods

    • init: add event listeners
    • getCurrentIndex: get current slide index
    • goTo(index): goes to the slide index
    • destroy: remove event listeners

    Contributors

    Clone this repo:

    git clone git://github.com/liqueflies/slideer.git
    

    From project root:

    • npm run start: run project on http://localhost:3100 with BrowserSync
    • npm run bundle: compile project
    • npm run build: uglify project

    Tests

    Tests will be available soon.

    License

    MIT, see LICENSE.md for details.

    Keywords

    none

    Install

    npm i slideer

    DownloadsWeekly Downloads

    0

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    356 kB

    Total Files

    11

    Last publish

    Collaborators

    • liqueflies