├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── slideer.png
├── src
    └── index.js
├── webpack.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | node_modules
3 | *.log
4 | .DS_Store
5 | build/
6 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | bower_components
 2 | node_modules
 3 | *.log
 4 | .DS_Store
 5 | bundle.js
 6 | test
 7 | test.js
 8 | demo/
 9 | .npmignore
10 | LICENSE.md


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # ChangeLog
 2 | 
 3 | ## 0.0.6
 4 | - Limited touchActions to pan-y
 5 | 
 6 | ## 0.0.5
 7 | - Fixed swipe direction
 8 | 
 9 | ## 0.0.4
10 | - Fixed startIndex
11 | 
12 | ## 0.0.3
13 | - Fixed wrong build
14 | 
15 | ## 0.0.2
16 | - Fixed vertical swipe and animating bool
17 | 
18 | ## 0.0.1
19 | - First release
20 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | Copyright (c) 2016 Lorenzo Girardi
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy
 5 | of this software and associated documentation files (the "Software"), to deal
 6 | in the Software without restriction, including without limitation the rights
 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the Software is
 9 | furnished to do so, subject to the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be included in all
12 | copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
18 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
19 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
20 | OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <img src="slideer.png" width="250px" />
  3 | </p>
  4 | 
  5 | # Slideer
  6 | 
  7 | Simple wrapper to create sliders focused on animations.
  8 | This project is a fork of `slider-manager` originally created by [Baptiste Briel](https://github.com/baptistebriel/slider-manager).
  9 | 
 10 | ### Installation
 11 | 
 12 | Prerequisites: [Node.js](https://nodejs.org/en/) (>=4.x, 6.x preferred) and [Git](https://git-scm.com/).
 13 | 
 14 | **Using yarn:** 
 15 | 
 16 | ```
 17 | yarn add slideer
 18 | ```
 19 | 
 20 | **Using npm:** 
 21 | 
 22 | ```
 23 | npm install slideer --save`
 24 | ```
 25 | 
 26 | ## Usage
 27 | 
 28 | ```javascript
 29 | import Slideer from 'slideer'
 30 | import gsap from 'gsap'
 31 | 
 32 | const slideWrap = document.getElementById('#slider')
 33 | const slides = Array.from(slideWrap.querySelectorAll('.slides'))
 34 | 
 35 | const slider = new Slideer(slideWrap, {
 36 |     length: slides.length,
 37 |     loop: true,
 38 |     callback: (event) => {
 39 |         
 40 |         const index = event.current // array index
 41 |         const previous = event.previous // array index
 42 |         const direction = event.direction // +1 for next, -1 for prev
 43 | 
 44 |         slider.animating = true
 45 | 
 46 |         const windowWidth = window.innerWidth
 47 |         const tl = new TimelineMax({ paused: true, onComplete: () => {
 48 |             slider.animating = false
 49 |         }})
 50 | 
 51 |         tl.staggerTo(slides, 1, { cycle: {
 52 |             y: (loop) => index === loop ? 0 : windowWidth * direction
 53 |         }, ease: Expo.easeInOut}, 0, 0)
 54 | 
 55 |         tl.restart()
 56 |     }
 57 | })
 58 | 
 59 | // remember to initialize slider
 60 | slider.init()
 61 | 
 62 | // if you have pagination buttons
 63 | const prevControl = document.querySelector('.btn-prev')
 64 | const nextControl = document.querySelector('.btn-next')
 65 | 
 66 | // automatic check for loop or limit reached
 67 | prevControl.addEventListener('click', slider.goTo.call(slider, slider.getCurrentSlide() - 1), false)
 68 | nextControl.addEventListener('click', slider.goTo.call(slider, slider.getCurrentSlide() + 1), false)
 69 | 
 70 | ```
 71 | 
 72 | ### element
 73 | - `el`: slider wrapper element to attach swipe event
 74 | 
 75 | ### options
 76 | 
 77 | - `loop`: true of false
 78 | - `delta`: delta limiter for swipe events
 79 | - `callback`: function called when user has swiped or scrolled
 80 | 
 81 | ### methods
 82 | 
 83 | - `init`: add event listeners
 84 | - `getCurrentIndex`: get current slide index
 85 | - `goTo(index)`: goes to the slide index
 86 | - `destroy`: remove event listeners
 87 | 
 88 | ## Contributors
 89 | 
 90 | Clone this repo:
 91 | 
 92 | ```
 93 | git clone git://github.com/liqueflies/slideer.git
 94 | ```
 95 | 
 96 | From project root:
 97 | 
 98 | - `npm run start`: run project on ```http://localhost:3100``` with BrowserSync
 99 | - `npm run bundle`: compile project
100 | - `npm run build`: uglify project
101 | 
102 | ## Tests
103 | 
104 | Tests will be available soon.
105 | 
106 | ## License
107 | 
108 | MIT, see [LICENSE.md](http://github.com/liqueflies/slideer/blob/master/LICENSE.md) for details.
109 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "slideer",
 3 |   "version": "0.0.6",
 4 |   "description": "Slider manager focused on animation, forked by slider-manager by Baptiste Briel",
 5 |   "main": "build/slideer.js",
 6 |   "license": "MIT",
 7 |   "author": "Lorenzo Girardi <lorenzo.girardi93@gmail.com> (https://github.com/liqueflies)",
 8 |   "dependencies": {
 9 |     "hammerjs": "^2.0.8"
10 |   },
11 |   "devDependencies": {
12 |     "@babel/core": "^7.7.4",
13 |     "@babel/preset-env": "^7.7.4",
14 |     "babel-loader": "^8.0.6",
15 |     "browser-sync": "^2.26.7",
16 |     "browser-sync-webpack-plugin": "^2.2.2",
17 |     "webpack": "^4.41.2",
18 |     "webpack-cli": "^3.3.10",
19 |     "webpack-notifier": "^1.8.0"
20 |   },
21 |   "scripts": {
22 |     "bundle": "webpack",
23 |     "start": "webpack --watch",
24 |     "build": "webpack && webpack -p"
25 |   },
26 |   "keywords": [],
27 |   "repository": {
28 |     "type": "git",
29 |     "url": "git://github.com/liqueflies/slideer.git"
30 |   },
31 |   "homepage": "https://github.com/liqueflies/slideer",
32 |   "bugs": {
33 |     "url": "https://github.com/liqueflies/slideer/issues"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/slideer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liqueflies/slideer/b5c52c2f31bc318c555a81a73055b82b2eef3d6e/slideer.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import Hammer from 'hammerjs'
  2 | 
  3 | export default class Slideer {
  4 | 
  5 |     constructor(el, opt = {}) {
  6 | 
  7 |         if(!el)
  8 |             console.error('You need to provide an element in costructor')
  9 | 
 10 |         if(!opt.callback)
 11 |             console.error('You need to provide a callback function in the options')
 12 | 
 13 |         this.el = el
 14 |         this.animating = false
 15 | 
 16 |         this.index = opt.startIndex ? opt.startIndex : 0
 17 |         this.length = opt.length - 1
 18 | 
 19 |         this.options = {
 20 |             loop: opt.loop || false,
 21 |             callback: opt.callback,
 22 |             delta: opt.delta || 1
 23 |         }
 24 | 
 25 |         this.hammer = null
 26 | 
 27 |         this.onSwipe = this.onSwipe.bind(this)
 28 |     }
 29 | 
 30 |     init() {
 31 | 
 32 |         this.hammer = new Hammer.Manager(this.el, { touchAction: 'pan-y' })
 33 |         this.hammer.add(new Hammer.Swipe({
 34 |             direction: Hammer.DIRECTION_HORIZONTAL
 35 |         }))
 36 |         this.hammer.on('swipe', this.onSwipe)
 37 |     }
 38 | 
 39 |     destroy() {
 40 | 
 41 |         this.hammer.off('swipe', this.onSwipe)
 42 |         this.hammer.destroy()
 43 |         this.hammer = null
 44 |     }
 45 | 
 46 |     getNext(delta) {
 47 | 
 48 |         const next = delta >= this.options.delta ? this.index - 1 : this.index + 1
 49 | 
 50 |         return this.checkLoop(next)
 51 |     }
 52 | 
 53 |     checkLoop(next) {
 54 | 
 55 |         return next < 0 ? this.options.loop ? this.length : 0 : next > this.length ? this.options.loop ? 0 : this.length : next
 56 |     }
 57 | 
 58 |     getEvent(index) {
 59 | 
 60 |         return {
 61 |             current: index,
 62 |             previous: this.index,
 63 |             direction: index >= this.index ? 1 : -1
 64 |         }
 65 |     }
 66 | 
 67 |     getCurrentSlide() {
 68 | 
 69 |         return this.index
 70 |     }
 71 | 
 72 |     onSwipe(e) {
 73 | 
 74 |         const delta = e.deltaX
 75 | 
 76 |         if(this.animating || delta > -this.options.delta && delta < this.options.delta) return
 77 |         this.animating = true
 78 | 
 79 |         this.callback(delta)
 80 |     }
 81 | 
 82 |     goTo(index) {
 83 | 
 84 |         const check = this.checkLoop(index)
 85 |         const event = this.getEvent(check)
 86 | 
 87 |         if(this.animating) return
 88 |         this.animating = true
 89 | 
 90 |         this.index = check
 91 |         this.options.callback(event)
 92 |     }
 93 | 
 94 |     callback(delta) {
 95 | 
 96 |         const index = this.getNext(delta)
 97 |         const event = this.getEvent(index)
 98 | 
 99 |         this.index = index
100 |         this.options.callback(event)
101 |     }
102 | }
103 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const path = require('path');
 3 | const webpack = require('webpack');
 4 | 
 5 | const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 6 | const WebpackNotifierPlugin = require('webpack-notifier');
 7 | 
 8 | const isProd = process.argv.indexOf('-p') !== -1;
 9 | 
10 | module.exports = {
11 | 
12 |   entry: {
13 |     slideer: './src/index.js'
14 |   },
15 | 
16 |   mode: isProd ? 'production' : 'development',
17 | 
18 |   output: {
19 |     path: path.join(__dirname, '/build'),
20 |     filename: isProd ? '[name].min.js' : '[name].js',
21 |     libraryTarget: 'umd'
22 |   },
23 | 
24 |   devtool: 'source-map',
25 | 
26 |   module: {
27 |     rules: [
28 |       {
29 |         test: /\.js$/,
30 |         exclude: /node_modules/,
31 |         use: [
32 |           {
33 |             loader: 'babel-loader', 
34 |             options: {
35 |               presets: ['@babel/preset-env']
36 |             }
37 |           }
38 |         ]
39 |       },
40 |     ]
41 |   },
42 | 
43 |   plugins: [
44 | 
45 |     new WebpackNotifierPlugin({
46 |       title: 'Build',
47 |       skipFirstNotification: true
48 |     }),
49 | 
50 |     new BrowserSyncPlugin({
51 |       // browse to http://localhost:3000/ during development
52 |       host: 'localhost',
53 |       port: 3100,
54 |       proxy: 'http://localhost:3000/'
55 |     }),
56 | 
57 |   ]
58 |   
59 | };
60 | 


--------------------------------------------------------------------------------