├── .editorconfig ├── .gitignore ├── .npmignore ├── .prettierignore ├── LICENSE.md ├── README.md ├── assets ├── airbnb.png ├── cnn.png ├── htc.png ├── nhl.png ├── snapguide.png └── thinkgeek.png ├── package-lock.json ├── package.json ├── style.css ├── swipe.js ├── swipe.min.js └── test.html /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | *.log 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | test.html 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | swipe.min.js 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2015 Brad Birdsall 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Universal (a.k.a isomorphic) Swipe.js 2 | 3 | [![npm version](http://badge.fury.io/js/swipe-js-iso.svg)](http://badge.fury.io/js/swipe-js-iso) 4 | [![Download Count](http://img.shields.io/npm/dm/swipe-js-iso.svg?style=flat)](http://www.npmjs.com/package/swipe-js-iso) 5 | Buy Me A Coffee 6 | 7 | > Fork of original [Swipe](https://github.com/thebird/Swipe) in order to be published to NPM (has no deps) and being compatible with universal apps. 8 | 9 | # Install 10 | 11 | ```bash 12 | npm install swipe-js-iso --save 13 | ``` 14 | 15 | **✅ PRO HINT:** Use [ReactSwipe](https://github.com/jed/react-swipe) component 16 | 17 | ## Usage 18 | 19 | Swipe only needs to follow a simple layout pattern. Here is an example: 20 | 21 | ```html 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | ``` 30 | 31 | Above is the initial required structure – a series of elements wrapped in two containers. Place any content you want within the items. The containing div will need to be passed to the Swipe function like so: 32 | 33 | ```js 34 | const mySwipe = Swipe(document.getElementById('slider')); 35 | ``` 36 | 37 | I always place this at the bottom of the page, externally, to verify the page is ready. 38 | 39 | Also Swipe needs just a few styles added to your stylesheet: 40 | 41 | ```css 42 | .swipe { 43 | overflow: hidden; 44 | visibility: hidden; 45 | position: relative; 46 | } 47 | .swipe-wrap { 48 | overflow: hidden; 49 | position: relative; 50 | } 51 | .swipe-wrap > div { 52 | float: left; 53 | width: 100%; 54 | position: relative; 55 | } 56 | ``` 57 | 58 | ## Config Options 59 | 60 | Swipe can take an optional second parameter– an object of key/value settings: 61 | 62 | - **startSlide** Integer _(default:0)_ - index position Swipe should start at 63 | 64 | - **speed** Integer _(default:300)_ - speed of prev and next transitions in milliseconds. 65 | 66 | - **widthOfSiblingSlidePreview** Integer - Width of next and previous slide preview in pixels 67 | 68 | - **auto** Integer - begin with auto slideshow (time in milliseconds between slides) 69 | 70 | - **continuous** Boolean _(default:true)_ - create an infinite feel with no endpoints 71 | 72 | - **disableScroll** Boolean _(default:false)_ - stop any touches on this container from scrolling the page 73 | 74 | - **stopPropagation** Boolean _(default:false)_ - stop event propagation 75 | 76 | - **swiping** Function - invoked while swiping with the percentage (0-1) of the full width that has been swiped. 77 | 78 | - **callback** Function - runs at slide change. 79 | 80 | - **transitionEnd** Function - runs at the end slide transition. 81 | 82 | ### Example 83 | 84 | ```js 85 | const mySwipe = new Swipe(document.getElementById('slider'), { 86 | startSlide: 2, 87 | speed: 400, 88 | widthOfSiblingSlidePreview: 10, 89 | auto: 3000, 90 | continuous: true, 91 | disableScroll: false, 92 | stopPropagation: false, 93 | callback: function(index, elem) {}, 94 | transitionEnd: function(index, elem) {} 95 | }); 96 | ``` 97 | 98 | ## Swipe API 99 | 100 | Swipe exposes a few functions that can be useful for script control of your slider. 101 | 102 | `prev()` slide to prev 103 | 104 | `next()` slide to next 105 | 106 | `getPos()` returns current slide index position 107 | 108 | `getNumSlides()` returns the total amount of slides 109 | 110 | `slide(index, duration)` slide to set index position (duration: speed of transition in milliseconds) 111 | 112 | `disableScrolling(disableScroll)` directly control scrolling (disableScroll: same as the config option ) 113 | 114 | ## Browser Support 115 | 116 | Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly. 117 | 118 | ## Who's using Swipe 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | --- 128 | 129 | **MIT License** 130 | -------------------------------------------------------------------------------- /assets/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/voronianski/swipe-js-iso/6b7ee33d22b333e70746d3dde1507ee90e19386c/assets/airbnb.png -------------------------------------------------------------------------------- /assets/cnn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/voronianski/swipe-js-iso/6b7ee33d22b333e70746d3dde1507ee90e19386c/assets/cnn.png -------------------------------------------------------------------------------- /assets/htc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/voronianski/swipe-js-iso/6b7ee33d22b333e70746d3dde1507ee90e19386c/assets/htc.png -------------------------------------------------------------------------------- /assets/nhl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/voronianski/swipe-js-iso/6b7ee33d22b333e70746d3dde1507ee90e19386c/assets/nhl.png -------------------------------------------------------------------------------- /assets/snapguide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/voronianski/swipe-js-iso/6b7ee33d22b333e70746d3dde1507ee90e19386c/assets/snapguide.png -------------------------------------------------------------------------------- /assets/thinkgeek.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/voronianski/swipe-js-iso/6b7ee33d22b333e70746d3dde1507ee90e19386c/assets/thinkgeek.png -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swipe-js-iso", 3 | "version": "2.1.6", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "ansi-styles": { 8 | "version": "3.2.1", 9 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", 10 | "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", 11 | "dev": true, 12 | "requires": { 13 | "color-convert": "1.9.3" 14 | } 15 | }, 16 | "builtin-modules": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz", 19 | "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", 20 | "dev": true 21 | }, 22 | "caller-callsite": { 23 | "version": "2.0.0", 24 | "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", 25 | "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=", 26 | "dev": true, 27 | "requires": { 28 | "callsites": "2.0.0" 29 | } 30 | }, 31 | "caller-path": { 32 | "version": "2.0.0", 33 | "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz", 34 | "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=", 35 | "dev": true, 36 | "requires": { 37 | "caller-callsite": "2.0.0" 38 | } 39 | }, 40 | "callsites": { 41 | "version": "2.0.0", 42 | "resolved": "http://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", 43 | "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=", 44 | "dev": true 45 | }, 46 | "chalk": { 47 | "version": "2.4.1", 48 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", 49 | "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", 50 | "dev": true, 51 | "requires": { 52 | "ansi-styles": "3.2.1", 53 | "escape-string-regexp": "1.0.5", 54 | "supports-color": "5.5.0" 55 | } 56 | }, 57 | "ci-info": { 58 | "version": "1.6.0", 59 | "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz", 60 | "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==", 61 | "dev": true 62 | }, 63 | "color-convert": { 64 | "version": "1.9.3", 65 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", 66 | "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", 67 | "dev": true, 68 | "requires": { 69 | "color-name": "1.1.3" 70 | } 71 | }, 72 | "color-name": { 73 | "version": "1.1.3", 74 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 75 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", 76 | "dev": true 77 | }, 78 | "commander": { 79 | "version": "2.17.1", 80 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", 81 | "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", 82 | "dev": true 83 | }, 84 | "cosmiconfig": { 85 | "version": "5.0.7", 86 | "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.0.7.tgz", 87 | "integrity": "sha512-PcLqxTKiDmNT6pSpy4N6KtuPwb53W+2tzNvwOZw0WH9N6O0vLIBq0x8aj8Oj75ere4YcGi48bDFCL+3fRJdlNA==", 88 | "dev": true, 89 | "requires": { 90 | "import-fresh": "2.0.0", 91 | "is-directory": "0.3.1", 92 | "js-yaml": "3.12.0", 93 | "parse-json": "4.0.0" 94 | }, 95 | "dependencies": { 96 | "argparse": { 97 | "version": "1.0.10", 98 | "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", 99 | "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", 100 | "dev": true, 101 | "requires": { 102 | "sprintf-js": "1.0.3" 103 | } 104 | }, 105 | "esprima": { 106 | "version": "4.0.1", 107 | "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", 108 | "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", 109 | "dev": true 110 | }, 111 | "js-yaml": { 112 | "version": "3.12.0", 113 | "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz", 114 | "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==", 115 | "dev": true, 116 | "requires": { 117 | "argparse": "1.0.10", 118 | "esprima": "4.0.1" 119 | } 120 | } 121 | } 122 | }, 123 | "cross-spawn": { 124 | "version": "6.0.5", 125 | "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", 126 | "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", 127 | "dev": true, 128 | "requires": { 129 | "nice-try": "1.0.5", 130 | "path-key": "2.0.1", 131 | "semver": "5.6.0", 132 | "shebang-command": "1.2.0", 133 | "which": "1.3.1" 134 | }, 135 | "dependencies": { 136 | "which": { 137 | "version": "1.3.1", 138 | "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", 139 | "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", 140 | "dev": true, 141 | "requires": { 142 | "isexe": "2.0.0" 143 | } 144 | } 145 | } 146 | }, 147 | "end-of-stream": { 148 | "version": "1.4.1", 149 | "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", 150 | "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==", 151 | "dev": true, 152 | "requires": { 153 | "once": "1.4.0" 154 | } 155 | }, 156 | "error-ex": { 157 | "version": "1.3.2", 158 | "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", 159 | "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", 160 | "dev": true, 161 | "requires": { 162 | "is-arrayish": "0.2.1" 163 | } 164 | }, 165 | "escape-string-regexp": { 166 | "version": "1.0.5", 167 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", 168 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", 169 | "dev": true 170 | }, 171 | "execa": { 172 | "version": "1.0.0", 173 | "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", 174 | "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", 175 | "dev": true, 176 | "requires": { 177 | "cross-spawn": "6.0.5", 178 | "get-stream": "4.1.0", 179 | "is-stream": "1.1.0", 180 | "npm-run-path": "2.0.2", 181 | "p-finally": "1.0.0", 182 | "signal-exit": "3.0.2", 183 | "strip-eof": "1.0.0" 184 | } 185 | }, 186 | "find-up": { 187 | "version": "3.0.0", 188 | "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", 189 | "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", 190 | "dev": true, 191 | "requires": { 192 | "locate-path": "3.0.0" 193 | } 194 | }, 195 | "get-stdin": { 196 | "version": "6.0.0", 197 | "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", 198 | "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", 199 | "dev": true 200 | }, 201 | "get-stream": { 202 | "version": "4.1.0", 203 | "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", 204 | "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", 205 | "dev": true, 206 | "requires": { 207 | "pump": "3.0.0" 208 | } 209 | }, 210 | "has-flag": { 211 | "version": "3.0.0", 212 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", 213 | "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", 214 | "dev": true 215 | }, 216 | "hosted-git-info": { 217 | "version": "2.7.1", 218 | "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", 219 | "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", 220 | "dev": true 221 | }, 222 | "husky": { 223 | "version": "1.2.0", 224 | "resolved": "https://registry.npmjs.org/husky/-/husky-1.2.0.tgz", 225 | "integrity": "sha512-/ib3+iycykXC0tYIxsyqierikVa9DA2DrT32UEirqNEFVqOj1bFMTgP3jAz8HM7FgC/C8pc/BTUa9MV2GEkZaA==", 226 | "dev": true, 227 | "requires": { 228 | "cosmiconfig": "5.0.7", 229 | "execa": "1.0.0", 230 | "find-up": "3.0.0", 231 | "get-stdin": "6.0.0", 232 | "is-ci": "1.2.1", 233 | "pkg-dir": "3.0.0", 234 | "please-upgrade-node": "3.1.1", 235 | "read-pkg": "4.0.1", 236 | "run-node": "1.0.0", 237 | "slash": "2.0.0" 238 | } 239 | }, 240 | "ignore": { 241 | "version": "3.3.10", 242 | "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz", 243 | "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", 244 | "dev": true 245 | }, 246 | "import-fresh": { 247 | "version": "2.0.0", 248 | "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz", 249 | "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=", 250 | "dev": true, 251 | "requires": { 252 | "caller-path": "2.0.0", 253 | "resolve-from": "3.0.0" 254 | } 255 | }, 256 | "is-arrayish": { 257 | "version": "0.2.1", 258 | "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", 259 | "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", 260 | "dev": true 261 | }, 262 | "is-builtin-module": { 263 | "version": "1.0.0", 264 | "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", 265 | "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", 266 | "dev": true, 267 | "requires": { 268 | "builtin-modules": "1.1.1" 269 | } 270 | }, 271 | "is-ci": { 272 | "version": "1.2.1", 273 | "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", 274 | "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", 275 | "dev": true, 276 | "requires": { 277 | "ci-info": "1.6.0" 278 | } 279 | }, 280 | "is-directory": { 281 | "version": "0.3.1", 282 | "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz", 283 | "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", 284 | "dev": true 285 | }, 286 | "is-stream": { 287 | "version": "1.1.0", 288 | "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", 289 | "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", 290 | "dev": true 291 | }, 292 | "isexe": { 293 | "version": "2.0.0", 294 | "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", 295 | "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", 296 | "dev": true 297 | }, 298 | "json-parse-better-errors": { 299 | "version": "1.0.2", 300 | "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", 301 | "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", 302 | "dev": true 303 | }, 304 | "locate-path": { 305 | "version": "3.0.0", 306 | "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", 307 | "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", 308 | "dev": true, 309 | "requires": { 310 | "p-locate": "3.0.0", 311 | "path-exists": "3.0.0" 312 | } 313 | }, 314 | "mri": { 315 | "version": "1.1.1", 316 | "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.1.tgz", 317 | "integrity": "sha1-haom09ru7t+A3FmEr5XMXKXK2fE=", 318 | "dev": true 319 | }, 320 | "nice-try": { 321 | "version": "1.0.5", 322 | "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", 323 | "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", 324 | "dev": true 325 | }, 326 | "normalize-package-data": { 327 | "version": "2.4.0", 328 | "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz", 329 | "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==", 330 | "dev": true, 331 | "requires": { 332 | "hosted-git-info": "2.7.1", 333 | "is-builtin-module": "1.0.0", 334 | "semver": "5.6.0", 335 | "validate-npm-package-license": "3.0.4" 336 | } 337 | }, 338 | "npm-run-path": { 339 | "version": "2.0.2", 340 | "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", 341 | "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", 342 | "dev": true, 343 | "requires": { 344 | "path-key": "2.0.1" 345 | } 346 | }, 347 | "once": { 348 | "version": "1.4.0", 349 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 350 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", 351 | "dev": true, 352 | "requires": { 353 | "wrappy": "1.0.2" 354 | } 355 | }, 356 | "p-finally": { 357 | "version": "1.0.0", 358 | "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", 359 | "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", 360 | "dev": true 361 | }, 362 | "p-limit": { 363 | "version": "2.0.0", 364 | "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz", 365 | "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==", 366 | "dev": true, 367 | "requires": { 368 | "p-try": "2.0.0" 369 | } 370 | }, 371 | "p-locate": { 372 | "version": "3.0.0", 373 | "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", 374 | "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", 375 | "dev": true, 376 | "requires": { 377 | "p-limit": "2.0.0" 378 | } 379 | }, 380 | "p-try": { 381 | "version": "2.0.0", 382 | "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz", 383 | "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==", 384 | "dev": true 385 | }, 386 | "parse-json": { 387 | "version": "4.0.0", 388 | "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", 389 | "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", 390 | "dev": true, 391 | "requires": { 392 | "error-ex": "1.3.2", 393 | "json-parse-better-errors": "1.0.2" 394 | } 395 | }, 396 | "path-exists": { 397 | "version": "3.0.0", 398 | "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", 399 | "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", 400 | "dev": true 401 | }, 402 | "path-key": { 403 | "version": "2.0.1", 404 | "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", 405 | "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", 406 | "dev": true 407 | }, 408 | "pify": { 409 | "version": "3.0.0", 410 | "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", 411 | "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", 412 | "dev": true 413 | }, 414 | "pkg-dir": { 415 | "version": "3.0.0", 416 | "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", 417 | "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==", 418 | "dev": true, 419 | "requires": { 420 | "find-up": "3.0.0" 421 | } 422 | }, 423 | "please-upgrade-node": { 424 | "version": "3.1.1", 425 | "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz", 426 | "integrity": "sha512-KY1uHnQ2NlQHqIJQpnh/i54rKkuxCEBx+voJIS/Mvb+L2iYd2NMotwduhKTMjfC1uKoX3VXOxLjIYG66dfJTVQ==", 427 | "dev": true, 428 | "requires": { 429 | "semver-compare": "1.0.0" 430 | } 431 | }, 432 | "prettier": { 433 | "version": "1.15.2", 434 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.15.2.tgz", 435 | "integrity": "sha512-YgPLFFA0CdKL4Eg2IHtUSjzj/BWgszDHiNQAe0VAIBse34148whfdzLagRL+QiKS+YfK5ftB6X4v/MBw8yCoug==", 436 | "dev": true 437 | }, 438 | "pretty-quick": { 439 | "version": "1.8.0", 440 | "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-1.8.0.tgz", 441 | "integrity": "sha512-qV25sQF/ivJpdZ5efwemQYkQJa7sp3HqT/Vf/7z5vGYMcq1VrT2lDpFKAxJPf6219N1YAdR8mGkIhPAZ1odTmQ==", 442 | "dev": true, 443 | "requires": { 444 | "chalk": "2.4.1", 445 | "execa": "0.8.0", 446 | "find-up": "2.1.0", 447 | "ignore": "3.3.10", 448 | "mri": "1.1.1" 449 | }, 450 | "dependencies": { 451 | "cross-spawn": { 452 | "version": "5.1.0", 453 | "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", 454 | "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", 455 | "dev": true, 456 | "requires": { 457 | "lru-cache": "4.1.4", 458 | "shebang-command": "1.2.0", 459 | "which": "1.3.1" 460 | } 461 | }, 462 | "execa": { 463 | "version": "0.8.0", 464 | "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz", 465 | "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=", 466 | "dev": true, 467 | "requires": { 468 | "cross-spawn": "5.1.0", 469 | "get-stream": "3.0.0", 470 | "is-stream": "1.1.0", 471 | "npm-run-path": "2.0.2", 472 | "p-finally": "1.0.0", 473 | "signal-exit": "3.0.2", 474 | "strip-eof": "1.0.0" 475 | } 476 | }, 477 | "find-up": { 478 | "version": "2.1.0", 479 | "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", 480 | "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", 481 | "dev": true, 482 | "requires": { 483 | "locate-path": "2.0.0" 484 | } 485 | }, 486 | "get-stream": { 487 | "version": "3.0.0", 488 | "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", 489 | "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", 490 | "dev": true 491 | }, 492 | "locate-path": { 493 | "version": "2.0.0", 494 | "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", 495 | "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", 496 | "dev": true, 497 | "requires": { 498 | "p-locate": "2.0.0", 499 | "path-exists": "3.0.0" 500 | } 501 | }, 502 | "lru-cache": { 503 | "version": "4.1.4", 504 | "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.4.tgz", 505 | "integrity": "sha512-EPstzZ23znHUVLKj+lcXO1KvZkrlw+ZirdwvOmnAnA/1PB4ggyXJ77LRkCqkff+ShQ+cqoxCxLQOh4cKITO5iA==", 506 | "dev": true, 507 | "requires": { 508 | "pseudomap": "1.0.2", 509 | "yallist": "3.0.2" 510 | } 511 | }, 512 | "p-limit": { 513 | "version": "1.3.0", 514 | "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", 515 | "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", 516 | "dev": true, 517 | "requires": { 518 | "p-try": "1.0.0" 519 | } 520 | }, 521 | "p-locate": { 522 | "version": "2.0.0", 523 | "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", 524 | "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", 525 | "dev": true, 526 | "requires": { 527 | "p-limit": "1.3.0" 528 | } 529 | }, 530 | "p-try": { 531 | "version": "1.0.0", 532 | "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", 533 | "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", 534 | "dev": true 535 | }, 536 | "which": { 537 | "version": "1.3.1", 538 | "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", 539 | "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", 540 | "dev": true, 541 | "requires": { 542 | "isexe": "2.0.0" 543 | } 544 | } 545 | } 546 | }, 547 | "pseudomap": { 548 | "version": "1.0.2", 549 | "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", 550 | "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", 551 | "dev": true 552 | }, 553 | "pump": { 554 | "version": "3.0.0", 555 | "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", 556 | "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", 557 | "dev": true, 558 | "requires": { 559 | "end-of-stream": "1.4.1", 560 | "once": "1.4.0" 561 | } 562 | }, 563 | "read-pkg": { 564 | "version": "4.0.1", 565 | "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz", 566 | "integrity": "sha1-ljYlN48+HE1IyFhytabsfV0JMjc=", 567 | "dev": true, 568 | "requires": { 569 | "normalize-package-data": "2.4.0", 570 | "parse-json": "4.0.0", 571 | "pify": "3.0.0" 572 | } 573 | }, 574 | "resolve-from": { 575 | "version": "3.0.0", 576 | "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", 577 | "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", 578 | "dev": true 579 | }, 580 | "run-node": { 581 | "version": "1.0.0", 582 | "resolved": "https://registry.npmjs.org/run-node/-/run-node-1.0.0.tgz", 583 | "integrity": "sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==", 584 | "dev": true 585 | }, 586 | "semver": { 587 | "version": "5.6.0", 588 | "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz", 589 | "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==", 590 | "dev": true 591 | }, 592 | "semver-compare": { 593 | "version": "1.0.0", 594 | "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz", 595 | "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=", 596 | "dev": true 597 | }, 598 | "shebang-command": { 599 | "version": "1.2.0", 600 | "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", 601 | "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", 602 | "dev": true, 603 | "requires": { 604 | "shebang-regex": "1.0.0" 605 | } 606 | }, 607 | "shebang-regex": { 608 | "version": "1.0.0", 609 | "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", 610 | "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", 611 | "dev": true 612 | }, 613 | "signal-exit": { 614 | "version": "3.0.2", 615 | "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", 616 | "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", 617 | "dev": true 618 | }, 619 | "slash": { 620 | "version": "2.0.0", 621 | "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", 622 | "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", 623 | "dev": true 624 | }, 625 | "source-map": { 626 | "version": "0.6.1", 627 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", 628 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", 629 | "dev": true 630 | }, 631 | "spdx-correct": { 632 | "version": "3.0.2", 633 | "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.2.tgz", 634 | "integrity": "sha512-q9hedtzyXHr5S0A1vEPoK/7l8NpfkFYTq6iCY+Pno2ZbdZR6WexZFtqeVGkGxW3TEJMN914Z55EnAGMmenlIQQ==", 635 | "dev": true, 636 | "requires": { 637 | "spdx-expression-parse": "3.0.0", 638 | "spdx-license-ids": "3.0.2" 639 | } 640 | }, 641 | "spdx-exceptions": { 642 | "version": "2.2.0", 643 | "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz", 644 | "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==", 645 | "dev": true 646 | }, 647 | "spdx-expression-parse": { 648 | "version": "3.0.0", 649 | "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", 650 | "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", 651 | "dev": true, 652 | "requires": { 653 | "spdx-exceptions": "2.2.0", 654 | "spdx-license-ids": "3.0.2" 655 | } 656 | }, 657 | "spdx-license-ids": { 658 | "version": "3.0.2", 659 | "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.2.tgz", 660 | "integrity": "sha512-qky9CVt0lVIECkEsYbNILVnPvycuEBkXoMFLRWsREkomQLevYhtRKC+R91a5TOAQ3bCMjikRwhyaRqj1VYatYg==", 661 | "dev": true 662 | }, 663 | "sprintf-js": { 664 | "version": "1.0.3", 665 | "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", 666 | "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", 667 | "dev": true 668 | }, 669 | "strip-eof": { 670 | "version": "1.0.0", 671 | "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", 672 | "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", 673 | "dev": true 674 | }, 675 | "supports-color": { 676 | "version": "5.5.0", 677 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", 678 | "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", 679 | "dev": true, 680 | "requires": { 681 | "has-flag": "3.0.0" 682 | } 683 | }, 684 | "uglify-js": { 685 | "version": "3.4.9", 686 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", 687 | "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==", 688 | "dev": true, 689 | "requires": { 690 | "commander": "2.17.1", 691 | "source-map": "0.6.1" 692 | } 693 | }, 694 | "validate-npm-package-license": { 695 | "version": "3.0.4", 696 | "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", 697 | "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", 698 | "dev": true, 699 | "requires": { 700 | "spdx-correct": "3.0.2", 701 | "spdx-expression-parse": "3.0.0" 702 | } 703 | }, 704 | "wrappy": { 705 | "version": "1.0.2", 706 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 707 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", 708 | "dev": true 709 | }, 710 | "yallist": { 711 | "version": "3.0.2", 712 | "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz", 713 | "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", 714 | "dev": true 715 | } 716 | } 717 | } 718 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swipe-js-iso", 3 | "version": "2.1.6", 4 | "main": "./swipe.js", 5 | "scripts": { 6 | "build": "uglifyjs -m reserved=[\"Swipe\"] -o ./swipe.min.js ./swipe.js ", 7 | "prepublishOnly": "npm run build" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/voronianski/swipe-js-iso.git" 12 | }, 13 | "license": "MIT", 14 | "homepage": "https://github.com/voronianski/swipe-js-iso#readme", 15 | "dependencies": {}, 16 | "prettier": { 17 | "singleQuote": true 18 | }, 19 | "husky": { 20 | "hooks": { 21 | "pre-commit": "pretty-quick --staged --ignore-path ./public" 22 | } 23 | }, 24 | "devDependencies": { 25 | "husky": "^1.2.0", 26 | "prettier": "^1.15.2", 27 | "pretty-quick": "^1.8.0", 28 | "uglify-js": "^3.4.9" 29 | }, 30 | "engines": { 31 | "node": ">=8.0.0", 32 | "npm": ">=5.5.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section { 2 | margin:0; 3 | padding:0; 4 | border:0; 5 | outline:0; 6 | font-size:100%; 7 | vertical-align:baseline; 8 | background:transparent; 9 | } 10 | body { 11 | -webkit-text-size-adjust:none; 12 | font-family:sans-serif; 13 | min-height:416px; 14 | } 15 | h1 { 16 | font-size:33px; 17 | margin:50px 0 15px; 18 | text-align:center; 19 | color:#212121; 20 | } 21 | h2 { 22 | font-size:14px; 23 | font-weight:bold; 24 | color:#3c3c3c; 25 | margin:20px 10px 10px; 26 | } 27 | small { 28 | margin:0 10px 30px; 29 | display:block; 30 | font-size:12px; 31 | } 32 | a { 33 | margin:0 0 0 10px; 34 | font-size:12px; 35 | color:#3c3c3c; 36 | } 37 | 38 | 39 | html, body { 40 | background: #f3f3f3; 41 | } 42 | 43 | #console { 44 | font-size: 12px; 45 | font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 46 | color: #999; 47 | line-height: 18px; 48 | margin-top: 20px; 49 | max-height: 150px; 50 | overflow: auto; 51 | } 52 | 53 | #mySwipe div b { 54 | display:block; 55 | font-weight:bold; 56 | color:#14ADE5; 57 | font-size:20px; 58 | text-align:center; 59 | margin:10px; 60 | padding:100px 10px; 61 | box-shadow: 0 1px #EBEBEB; 62 | background: #fff; 63 | border-radius: 3px; 64 | border: 1px solid; 65 | border-color: #E5E5E5 #D3D3D3 #B9C1C6; 66 | } 67 | -------------------------------------------------------------------------------- /swipe.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Swipe 2.0.0 3 | * Brad Birdsall 4 | * https://github.com/thebird/Swipe 5 | * Copyright 2013-2015, MIT License 6 | * 7 | */ 8 | 9 | (function(root, factory) { 10 | if (typeof module !== 'undefined' && module.exports) { 11 | module.exports = factory(); 12 | } else { 13 | root.Swipe = factory(); 14 | } 15 | })(this, function() { 16 | 'use strict'; 17 | 18 | return function Swipe(container, options) { 19 | // utilities 20 | var noop = function() {}; // simple no operation function 21 | var offloadFn = function(fn) { 22 | setTimeout(fn || noop, 0); 23 | }; // offload a functions execution 24 | 25 | // check browser capabilities 26 | var browser = { 27 | addEventListener: !!window.addEventListener, 28 | touch: 29 | 'ontouchstart' in window || 30 | (window.DocumentTouch && document instanceof window.DocumentTouch), 31 | transitions: (function(temp) { 32 | var props = [ 33 | 'transitionProperty', 34 | 'WebkitTransition', 35 | 'MozTransition', 36 | 'OTransition', 37 | 'msTransition' 38 | ]; 39 | for (var i in props) 40 | if (temp.style[props[i]] !== undefined) return true; 41 | return false; 42 | })(document.createElement('swipe')) 43 | }; 44 | 45 | // quit if no root element 46 | if (!container) return; 47 | var element = container.children[0]; 48 | var slides, slidePos, width, length; 49 | options = options || {}; 50 | var index = parseInt(options.startSlide, 10) || 0; 51 | var speed = options.speed || 300; 52 | var widthOfSiblingSlidePreview = 53 | parseInt(options.widthOfSiblingSlidePreview, 10) || 0; 54 | var continuous = (options.continuous = 55 | options.continuous !== undefined ? options.continuous : true); 56 | 57 | function setup() { 58 | // cache slides 59 | slides = element.children; 60 | length = slides.length; 61 | 62 | // set continuous to false if only one slide 63 | continuous = slides.length < 2 ? false : options.continuous; 64 | 65 | // create an array to store current positions of each slide 66 | slidePos = new Array(slides.length); 67 | 68 | // determine width of each slide 69 | width = 70 | Math.round( 71 | container.getBoundingClientRect().width || container.offsetWidth 72 | ) - 73 | widthOfSiblingSlidePreview * 2; 74 | 75 | element.style.width = slides.length * width + 'px'; 76 | 77 | // stack elements 78 | var pos = slides.length; 79 | while (pos--) { 80 | var slide = slides[pos]; 81 | 82 | slide.style.width = width + 'px'; 83 | slide.setAttribute('data-index', pos); 84 | 85 | if (browser.transitions) { 86 | slide.style.left = pos * -width + widthOfSiblingSlidePreview + 'px'; 87 | move(pos, index > pos ? -width : index < pos ? width : 0, 0); 88 | } 89 | } 90 | 91 | // reposition elements before and after index 92 | if (continuous && browser.transitions) { 93 | move(circle(index - 1), -width, 0); 94 | move(circle(index + 1), width, 0); 95 | } 96 | 97 | if (!browser.transitions) 98 | element.style.left = index * -width + widthOfSiblingSlidePreview + 'px'; 99 | 100 | container.style.visibility = 'visible'; 101 | } 102 | 103 | function prev() { 104 | if (continuous) slide(index - 1); 105 | else if (index) slide(index - 1); 106 | } 107 | 108 | function next() { 109 | if (continuous) slide(index + 1); 110 | else if (index < slides.length - 1) slide(index + 1); 111 | } 112 | 113 | function circle(index) { 114 | // a simple positive modulo using slides.length 115 | return (slides.length + (index % slides.length)) % slides.length; 116 | } 117 | 118 | function slide(to, slideSpeed) { 119 | // do nothing if already on requested slide 120 | if (index == to) return; 121 | 122 | if (browser.transitions) { 123 | var direction = Math.abs(index - to) / (index - to); // 1: backward, -1: forward 124 | 125 | // get the actual position of the slide 126 | if (continuous) { 127 | var natural_direction = direction; 128 | direction = -slidePos[circle(to)] / width; 129 | 130 | // if going forward but to < index, use to = slides.length + to 131 | // if going backward but to > index, use to = -slides.length + to 132 | if (direction !== natural_direction) 133 | to = -direction * slides.length + to; 134 | } 135 | 136 | var diff = Math.abs(index - to) - 1; 137 | 138 | // move all the slides between index and to in the right direction 139 | while (diff--) 140 | move( 141 | circle((to > index ? to : index) - diff - 1), 142 | width * direction, 143 | 0 144 | ); 145 | 146 | to = circle(to); 147 | 148 | move(index, width * direction, slideSpeed || speed); 149 | move(to, 0, slideSpeed || speed); 150 | 151 | if (continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place 152 | } else { 153 | to = circle(to); 154 | animate(index * -width, to * -width, slideSpeed || speed); 155 | //no fallback for a circular continuous if the browser does not accept transitions 156 | } 157 | 158 | index = to; 159 | offloadFn(options.callback && options.callback(index, slides[index])); 160 | } 161 | 162 | function move(index, dist, speed) { 163 | translate(index, dist, speed); 164 | slidePos[index] = dist; 165 | } 166 | 167 | function translate(index, dist, speed) { 168 | var slide = slides[index]; 169 | var style = slide && slide.style; 170 | 171 | if (!style) return; 172 | 173 | style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = 174 | speed + 'ms'; 175 | 176 | style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)'; 177 | style.msTransform = style.MozTransform = style.OTransform = 178 | 'translateX(' + dist + 'px)'; 179 | } 180 | 181 | function animate(from, to, speed) { 182 | // if not an animation, just reposition 183 | if (!speed) { 184 | element.style.left = to + 'px'; 185 | return; 186 | } 187 | 188 | var start = +new Date(); 189 | 190 | var timer = setInterval(function() { 191 | var timeElap = +new Date() - start; 192 | 193 | if (timeElap > speed) { 194 | element.style.left = to + 'px'; 195 | 196 | if (delay) begin(); 197 | 198 | options.transitionEnd && 199 | options.transitionEnd.call(event, index, slides[index]); 200 | 201 | clearInterval(timer); 202 | return; 203 | } 204 | 205 | element.style.left = 206 | (to - from) * (Math.floor((timeElap / speed) * 100) / 100) + 207 | from + 208 | 'px'; 209 | }, 4); 210 | } 211 | 212 | // setup auto slideshow 213 | var delay = options.auto || 0; 214 | var interval; 215 | 216 | function begin() { 217 | clearTimeout(interval); 218 | interval = setTimeout(next, delay); 219 | } 220 | 221 | function stop() { 222 | delay = options.auto || 0; 223 | clearTimeout(interval); 224 | } 225 | 226 | // setup initial vars 227 | var start = {}; 228 | var delta = {}; 229 | var isScrolling; 230 | 231 | // setup event capturing 232 | var events = { 233 | handleEvent: function(event) { 234 | switch (event.type) { 235 | case 'touchstart': 236 | this.start(event); 237 | break; 238 | case 'touchmove': 239 | this.move(event); 240 | break; 241 | case 'touchend': 242 | offloadFn(this.end(event)); 243 | break; 244 | case 'webkitTransitionEnd': 245 | case 'msTransitionEnd': 246 | case 'oTransitionEnd': 247 | case 'otransitionend': 248 | case 'transitionend': 249 | offloadFn(this.transitionEnd(event)); 250 | break; 251 | case 'resize': 252 | offloadFn(setup); 253 | break; 254 | } 255 | 256 | if (options.stopPropagation) event.stopPropagation(); 257 | }, 258 | start: function(event) { 259 | var touches = event.touches[0]; 260 | 261 | // measure start values 262 | start = { 263 | // get initial touch coords 264 | x: touches.pageX, 265 | y: touches.pageY, 266 | 267 | // store time to determine touch duration 268 | time: +new Date() 269 | }; 270 | 271 | // used for testing first move event 272 | isScrolling = undefined; 273 | 274 | // reset delta and end measurements 275 | delta = {}; 276 | 277 | // attach touchmove and touchend listeners 278 | element.addEventListener('touchmove', this, false); 279 | element.addEventListener('touchend', this, false); 280 | }, 281 | move: function(event) { 282 | // ensure swiping with one touch and not pinching 283 | if (event.touches.length > 1 || (event.scale && event.scale !== 1)) 284 | return; 285 | 286 | if (options.disableScroll) return; 287 | 288 | var touches = event.touches[0]; 289 | 290 | // measure change in x and y 291 | delta = { 292 | x: touches.pageX - start.x, 293 | y: touches.pageY - start.y 294 | }; 295 | 296 | // determine if scrolling test has run - one time test 297 | if (typeof isScrolling == 'undefined') { 298 | isScrolling = !!( 299 | isScrolling || Math.abs(delta.x) < Math.abs(delta.y) 300 | ); 301 | } 302 | 303 | // if user is not trying to scroll vertically 304 | if (!isScrolling) { 305 | // prevent native scrolling 306 | event.preventDefault(); 307 | 308 | // stop slideshow 309 | stop(); 310 | 311 | // increase resistance if first or last slide 312 | if (continuous) { 313 | // we don't add resistance at the end 314 | 315 | translate( 316 | circle(index - 1), 317 | delta.x + slidePos[circle(index - 1)], 318 | 0 319 | ); 320 | translate(index, delta.x + slidePos[index], 0); 321 | translate( 322 | circle(index + 1), 323 | delta.x + slidePos[circle(index + 1)], 324 | 0 325 | ); 326 | } else { 327 | delta.x = 328 | delta.x / 329 | ((!index && delta.x > 0) || // if first slide and sliding left 330 | (index == slides.length - 1 && // or if last slide and sliding right 331 | delta.x < 0) // and if sliding at all 332 | ? Math.abs(delta.x) / width + 1 // determine resistance level 333 | : 1); // no resistance if false 334 | 335 | // translate 1:1 336 | translate(index - 1, delta.x + slidePos[index - 1], 0); 337 | translate(index, delta.x + slidePos[index], 0); 338 | translate(index + 1, delta.x + slidePos[index + 1], 0); 339 | } 340 | options.swiping && options.swiping(-delta.x / width); 341 | } 342 | }, 343 | end: function(event) { 344 | // measure duration 345 | var duration = +new Date() - start.time; 346 | 347 | // determine if slide attempt triggers next/prev slide 348 | var isValidSlide = 349 | (Number(duration) < 250 && // if slide duration is less than 250ms 350 | Math.abs(delta.x) > 20) || // and if slide amt is greater than 20px 351 | Math.abs(delta.x) > width / 2; // or if slide amt is greater than half the width 352 | 353 | // determine if slide attempt is past start and end 354 | var isPastBounds = 355 | (!index && delta.x > 0) || // if first slide and slide amt is greater than 0 356 | (index == slides.length - 1 && delta.x < 0); // or if last slide and slide amt is less than 0 357 | 358 | if (continuous) isPastBounds = false; 359 | 360 | // determine direction of swipe (true:right, false:left) 361 | var direction = delta.x < 0; 362 | 363 | // if not scrolling vertically 364 | if (!isScrolling) { 365 | if (isValidSlide && !isPastBounds) { 366 | if (direction) { 367 | if (continuous) { 368 | // we need to get the next in this direction in place 369 | 370 | move(circle(index - 1), -width, 0); 371 | move(circle(index + 2), width, 0); 372 | } else { 373 | move(index - 1, -width, 0); 374 | } 375 | 376 | move(index, slidePos[index] - width, speed); 377 | move( 378 | circle(index + 1), 379 | slidePos[circle(index + 1)] - width, 380 | speed 381 | ); 382 | index = circle(index + 1); 383 | } else { 384 | if (continuous) { 385 | // we need to get the next in this direction in place 386 | 387 | move(circle(index + 1), width, 0); 388 | move(circle(index - 2), -width, 0); 389 | } else { 390 | move(index + 1, width, 0); 391 | } 392 | 393 | move(index, slidePos[index] + width, speed); 394 | move( 395 | circle(index - 1), 396 | slidePos[circle(index - 1)] + width, 397 | speed 398 | ); 399 | index = circle(index - 1); 400 | } 401 | 402 | options.callback && options.callback(index, slides[index]); 403 | } else { 404 | if (continuous) { 405 | move(circle(index - 1), -width, speed); 406 | move(index, 0, speed); 407 | move(circle(index + 1), width, speed); 408 | } else { 409 | move(index - 1, -width, speed); 410 | move(index, 0, speed); 411 | move(index + 1, width, speed); 412 | } 413 | } 414 | } 415 | 416 | // kill touchmove and touchend event listeners until touchstart called again 417 | element.removeEventListener('touchmove', events, false); 418 | element.removeEventListener('touchend', events, false); 419 | element.removeEventListener('touchforcechange', function() {}, false); 420 | }, 421 | transitionEnd: function(event) { 422 | if (parseInt(event.target.getAttribute('data-index'), 10) == index) { 423 | if (delay) begin(); 424 | 425 | options.transitionEnd && 426 | options.transitionEnd.call(event, index, slides[index]); 427 | } 428 | } 429 | }; 430 | 431 | // trigger setup 432 | setup(); 433 | 434 | // start auto slideshow if applicable 435 | if (delay) begin(); 436 | 437 | // add event listeners 438 | if (browser.addEventListener) { 439 | // set touchstart event on element 440 | if (browser.touch) { 441 | element.addEventListener('touchstart', events, false); 442 | element.addEventListener('touchforcechange', function() {}, false); 443 | } 444 | 445 | if (browser.transitions) { 446 | element.addEventListener('webkitTransitionEnd', events, false); 447 | element.addEventListener('msTransitionEnd', events, false); 448 | element.addEventListener('oTransitionEnd', events, false); 449 | element.addEventListener('otransitionend', events, false); 450 | element.addEventListener('transitionend', events, false); 451 | } 452 | 453 | // set resize event on window 454 | window.addEventListener('resize', events, false); 455 | } else { 456 | window.onresize = function() { 457 | setup(); 458 | }; // to play nice with old IE 459 | } 460 | 461 | // expose the Swipe API 462 | return { 463 | setup: function() { 464 | setup(); 465 | }, 466 | slide: function(to, speed) { 467 | // cancel slideshow 468 | stop(); 469 | 470 | slide(to, speed); 471 | }, 472 | prev: function() { 473 | // cancel slideshow 474 | stop(); 475 | 476 | prev(); 477 | }, 478 | next: function() { 479 | // cancel slideshow 480 | stop(); 481 | 482 | next(); 483 | }, 484 | stop: function() { 485 | // cancel slideshow 486 | stop(); 487 | }, 488 | getPos: function() { 489 | // return current index position 490 | return index; 491 | }, 492 | getNumSlides: function() { 493 | // return total number of slides 494 | return length; 495 | }, 496 | kill: function() { 497 | // cancel slideshow 498 | stop(); 499 | 500 | // reset element 501 | element.style.width = ''; 502 | element.style.left = ''; 503 | 504 | // reset slides 505 | var pos = slides.length; 506 | while (pos--) { 507 | var slide = slides[pos]; 508 | slide.style.width = ''; 509 | slide.style.left = ''; 510 | 511 | if (browser.transitions) translate(pos, 0, 0); 512 | } 513 | 514 | // removed event listeners 515 | if (browser.addEventListener) { 516 | // remove current event listeners 517 | element.removeEventListener('touchstart', events, false); 518 | element.removeEventListener('webkitTransitionEnd', events, false); 519 | element.removeEventListener('msTransitionEnd', events, false); 520 | element.removeEventListener('oTransitionEnd', events, false); 521 | element.removeEventListener('otransitionend', events, false); 522 | element.removeEventListener('transitionend', events, false); 523 | window.removeEventListener('resize', events, false); 524 | } else { 525 | window.onresize = null; 526 | } 527 | } 528 | }; 529 | }; 530 | }); 531 | -------------------------------------------------------------------------------- /swipe.min.js: -------------------------------------------------------------------------------- 1 | (function(e,t){if(typeof module!=="undefined"&&module.exports){module.exports=t()}else{e.Swipe=t()}})(this,function(){"use strict";return function Swipe(n,r){var t=function(){};var s=function(e){setTimeout(e||t,0)};var o={addEventListener:!!window.addEventListener,touch:"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch,transitions:function(e){var t=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(var n in t)if(e.style[t[n]]!==undefined)return true;return false}(document.createElement("swipe"))};if(!n)return;var f=n.children[0];var l,u,d,i;r=r||{};var c=parseInt(r.startSlide,10)||0;var v=r.speed||300;var a=parseInt(r.widthOfSiblingSlidePreview,10)||0;var h=r.continuous=r.continuous!==undefined?r.continuous:true;function m(){l=f.children;i=l.length;h=l.length<2?false:r.continuous;u=new Array(l.length);d=Math.round(n.getBoundingClientRect().width||n.offsetWidth)-a*2;f.style.width=l.length*d+"px";var e=l.length;while(e--){var t=l[e];t.style.width=d+"px";t.setAttribute("data-index",e);if(o.transitions){t.style.left=e*-d+a+"px";x(e,c>e?-d:cc?e:c)-a-1),d*n,0);e=E(e);x(c,d*n,t||v);x(e,0,t||v);if(h)x(E(e-n),-(d*n),0)}else{e=E(e);b(c*-d,e*-d,t||v)}c=e;s(r.callback&&r.callback(c,l[c]))}function x(e,t,n){g(e,t,n);u[e]=t}function g(e,t,n){var i=l[e];var a=i&&i.style;if(!a)return;a.webkitTransitionDuration=a.MozTransitionDuration=a.msTransitionDuration=a.OTransitionDuration=a.transitionDuration=n+"ms";a.webkitTransform="translate("+t+"px,0)"+"translateZ(0)";a.msTransform=a.MozTransform=a.OTransform="translateX("+t+"px)"}function b(t,n,i){if(!i){f.style.left=n+"px";return}var a=+new Date;var s=setInterval(function(){var e=+new Date-a;if(e>i){f.style.left=n+"px";if(T)L();r.transitionEnd&&r.transitionEnd.call(event,c,l[c]);clearInterval(s);return}f.style.left=(n-t)*(Math.floor(e/i*100)/100)+t+"px"},4)}var T=r.auto||0;var y;function L(){clearTimeout(y);y=setTimeout(w,T)}function k(){T=r.auto||0;clearTimeout(y)}var D={};var M={};var z;var S={handleEvent:function(e){switch(e.type){case"touchstart":this.start(e);break;case"touchmove":this.move(e);break;case"touchend":s(this.end(e));break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":s(this.transitionEnd(e));break;case"resize":s(m);break}if(r.stopPropagation)e.stopPropagation()},start:function(e){var t=e.touches[0];D={x:t.pageX,y:t.pageY,time:+new Date};z=undefined;M={};f.addEventListener("touchmove",this,false);f.addEventListener("touchend",this,false)},move:function(e){if(e.touches.length>1||e.scale&&e.scale!==1)return;if(r.disableScroll)return;var t=e.touches[0];M={x:t.pageX-D.x,y:t.pageY-D.y};if(typeof z=="undefined"){z=!!(z||Math.abs(M.x)0||c==l.length-1&&M.x<0?Math.abs(M.x)/d+1:1);g(c-1,M.x+u[c-1],0);g(c,M.x+u[c],0);g(c+1,M.x+u[c+1],0)}r.swiping&&r.swiping(-M.x/d)}},end:function(e){var t=+new Date-D.time;var n=Number(t)<250&&Math.abs(M.x)>20||Math.abs(M.x)>d/2;var i=!c&&M.x>0||c==l.length-1&&M.x<0;if(h)i=false;var a=M.x<0;if(!z){if(n&&!i){if(a){if(h){x(E(c-1),-d,0);x(E(c+2),d,0)}else{x(c-1,-d,0)}x(c,u[c]-d,v);x(E(c+1),u[E(c+1)]-d,v);c=E(c+1)}else{if(h){x(E(c+1),d,0);x(E(c-2),-d,0)}else{x(c+1,d,0)}x(c,u[c]+d,v);x(E(c-1),u[E(c-1)]+d,v);c=E(c-1)}r.callback&&r.callback(c,l[c])}else{if(h){x(E(c-1),-d,v);x(c,0,v);x(E(c+1),d,v)}else{x(c-1,-d,v);x(c,0,v);x(c+1,d,v)}}}f.removeEventListener("touchmove",S,false);f.removeEventListener("touchend",S,false);f.removeEventListener("touchforcechange",function(){},false)},transitionEnd:function(e){if(parseInt(e.target.getAttribute("data-index"),10)==c){if(T)L();r.transitionEnd&&r.transitionEnd.call(e,c,l[c])}}};m();if(T)L();if(o.addEventListener){if(o.touch){f.addEventListener("touchstart",S,false);f.addEventListener("touchforcechange",function(){},false)}if(o.transitions){f.addEventListener("webkitTransitionEnd",S,false);f.addEventListener("msTransitionEnd",S,false);f.addEventListener("oTransitionEnd",S,false);f.addEventListener("otransitionend",S,false);f.addEventListener("transitionend",S,false)}window.addEventListener("resize",S,false)}else{window.onresize=function(){m()}}return{setup:function(){m()},slide:function(e,t){k();p(e,t)},prev:function(){k();e()},next:function(){k();w()},stop:function(){k()},getPos:function(){return c},getNumSlides:function(){return i},kill:function(){k();f.style.width="";f.style.left="";var e=l.length;while(e--){var t=l[e];t.style.width="";t.style.left="";if(o.transitions)g(e,0,0)}if(o.addEventListener){f.removeEventListener("touchstart",S,false);f.removeEventListener("webkitTransitionEnd",S,false);f.removeEventListener("msTransitionEnd",S,false);f.removeEventListener("oTransitionEnd",S,false);f.removeEventListener("otransitionend",S,false);f.removeEventListener("transitionend",S,false);window.removeEventListener("resize",S,false)}else{window.onresize=null}}}}}); -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Swipe 2 5 | 6 | 10 | 11 | 29 | 30 | 31 |

Swipe 2

32 | 33 |
34 |
35 |
0
36 |
1
37 |
2
38 |
3
39 |
4
40 |
5
41 |
6
42 |
7
43 |
8
44 |
9
45 |
10
46 |
11
47 |
12
48 |
13
49 |
14
50 |
15
51 |
16
52 |
17
53 |
18
54 |
19
55 |
20
56 |
57 |
58 | 59 |
60 | 61 | 62 |
63 | 64 | 65 | 77 | 78 | 79 | --------------------------------------------------------------------------------