├── .gitignore ├── .npmignore ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── bower.json ├── browserstack.conf.js ├── demo ├── css │ ├── prism.css │ └── styles.css ├── images │ ├── angle-left.png │ └── angle-right.png ├── index.html └── js │ └── prism.js ├── dist ├── min │ ├── tiny-slider.helper.ie8.js │ └── tiny-slider.js ├── sourcemaps │ ├── tiny-slider.css.map │ ├── tiny-slider.helper.ie8.js.map │ └── tiny-slider.js.map ├── tiny-slider.css ├── tiny-slider.helper.ie8.js └── tiny-slider.js ├── docker-compose.yml ├── features.png ├── gulpfile.js ├── logos ├── browserstack.svg └── cbt.svg ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── helpers │ ├── addCSSRule.js │ ├── addClass.js │ ├── addEvents.js │ ├── arrayFromNodeList.js │ ├── caf.js │ ├── calc.js │ ├── checkStorageValue.js │ ├── classListSupport.js │ ├── createStyleSheet.js │ ├── docElement.js │ ├── events.js │ ├── extend.js │ ├── forEach.js │ ├── getAttr.js │ ├── getBody.js │ ├── getCssRulesLength.js │ ├── getEndProperty.js │ ├── getSlideId.js │ ├── getTouchDirection.js │ ├── has3DTransforms.js │ ├── hasAttr.js │ ├── hasClass.js │ ├── hideElement.js │ ├── isNodeList.js │ ├── isVisible.js │ ├── jsTransform.js │ ├── mediaquerySupport.js │ ├── passiveOption.js │ ├── percentageLayout.js │ ├── raf.js │ ├── removeAttrs.js │ ├── removeCSSRule.js │ ├── removeClass.js │ ├── removeEvents.js │ ├── removeEventsByClone.js │ ├── resetFakeBody.js │ ├── setAttrs.js │ ├── setFakeBody.js │ ├── setLocalStorage.js │ ├── showElement.js │ ├── toDegree.js │ └── whichProperty.js ├── ie8 │ ├── addEventListener.js │ ├── filter.js │ ├── firstElementChild.js │ ├── forEach.js │ ├── getComputedStyle.js │ ├── indexOf.js │ ├── isArray.js │ ├── lastElementChild.js │ ├── map.js │ ├── nextElementSibling.js │ └── previousElementSibling.js ├── tiny-slider.d.ts ├── tiny-slider.helper.ie8.js ├── tiny-slider.js ├── tiny-slider.module.js └── tiny-slider.scss ├── template ├── demo │ └── index.njk └── test │ ├── animation1.njk │ ├── animation2.njk │ ├── arrowKeys.njk │ ├── autoHeight.njk │ ├── autoplay.njk │ ├── base.njk │ ├── center-autoWidth-loop-edgePadding.njk │ ├── center-autoWidth-loop.njk │ ├── center-autoWidth-non-loop-edgePadding.njk │ ├── center-autoWidth-non-loop.njk │ ├── center-fixedWidth-loop.njk │ ├── center-fixedWidth-non-loop.njk │ ├── center-lazyload-autoWidth-loop.njk │ ├── center-lazyload-autoWidth-non-loop.njk │ ├── center-lazyload-fixedWidth-loop.njk │ ├── center-lazyload-fixedWidth-non-loop.njk │ ├── center-lazyload-loop.njk │ ├── center-lazyload-non-loop.njk │ ├── center-loop.njk │ ├── center-non-loop.njk │ ├── customize.njk │ ├── edgePadding-gutter.njk │ ├── edgePadding.njk │ ├── few-items.njk │ ├── fixedWidth-edgePadding-gutter.njk │ ├── fixedWidth-edgePadding.njk │ ├── fixedWidth-gutter.njk │ ├── fixedWidth.njk │ ├── frame1.njk │ ├── frame2.njk │ ├── frame3.njk │ ├── frame4.njk │ ├── frame5.njk │ ├── frame6.njk │ ├── gutter.njk │ ├── index.njk │ ├── lazyload.njk │ ├── mouse-drag.njk │ ├── nested.njk │ ├── non-loop.njk │ ├── parts │ └── layout.njk │ ├── responsive1-mobile.njk │ ├── responsive1.njk │ ├── responsive2-mobile.njk │ ├── responsive2.njk │ ├── responsive3-mobile.njk │ ├── responsive3.njk │ ├── responsive4-mobile.njk │ ├── responsive4.njk │ ├── responsive5-mobile.njk │ ├── responsive5.njk │ ├── responsive6-mobile.njk │ ├── responsive6.njk │ ├── rewind.njk │ ├── slide-by-page.njk │ ├── start-index.njk │ ├── tests-mobile.njk │ ├── vertical-edgePadding-gutter.njk │ ├── vertical-edgePadding.njk │ ├── vertical-gutter.njk │ └── vertical.njk ├── test ├── animation1.html ├── animation2.html ├── arrowKeys.html ├── autoHeight.html ├── autoplay.html ├── base.html ├── center-autoWidth-loop-edgePadding.html ├── center-autoWidth-loop.html ├── center-autoWidth-non-loop-edgePadding.html ├── center-autoWidth-non-loop.html ├── center-fixedWidth-loop.html ├── center-fixedWidth-non-loop.html ├── center-lazyload-autoWidth-loop.html ├── center-lazyload-autoWidth-non-loop.html ├── center-lazyload-fixedWidth-loop.html ├── center-lazyload-fixedWidth-non-loop.html ├── center-lazyload-loop.html ├── center-lazyload-non-loop.html ├── center-loop.html ├── center-non-loop.html ├── css │ ├── animate.min.css │ ├── prism.css │ └── test.css ├── customize.html ├── edgePadding-gutter.html ├── edgePadding.html ├── few-items.html ├── fixedWidth-edgePadding-gutter.html ├── fixedWidth-edgePadding.html ├── fixedWidth-gutter.html ├── fixedWidth.html ├── frame1.html ├── frame2.html ├── frame3.html ├── frame4.html ├── frame5.html ├── frame6.html ├── gutter.html ├── images │ ├── angle-left.png │ ├── angle-right.png │ └── pinwheel.svg ├── index.html ├── js │ ├── babel-polyfill │ │ └── dist │ │ │ ├── polyfill.js │ │ │ └── polyfill.min.js │ ├── es6-promise.auto.min.js │ ├── es6-promise.min.js │ ├── helpers.js │ ├── options.js │ ├── run.js │ ├── tests-async-es5.js │ └── tests-async.js ├── lazyload.html ├── mouse-drag.html ├── nested.html ├── non-loop.html ├── parts │ ├── index.html │ ├── layout.html │ ├── responsive1-mobile.html │ ├── responsive1.html │ ├── responsive2-mobile.html │ ├── responsive2.html │ ├── responsive3-mobile.html │ ├── responsive3.html │ ├── responsive4-mobile.html │ ├── responsive4.html │ ├── responsive5-mobile.html │ ├── responsive5.html │ ├── responsive6-mobile.html │ ├── responsive6.html │ └── tests-mobile.html ├── responsive1-mobile.html ├── responsive1.html ├── responsive2-mobile.html ├── responsive2.html ├── responsive3-mobile.html ├── responsive3.html ├── responsive4-mobile.html ├── responsive4.html ├── responsive5-mobile.html ├── responsive5.html ├── responsive6-mobile.html ├── responsive6.html ├── rewind.html ├── screenshot │ ├── chrome │ │ ├── animation1.png │ │ ├── animation2.png │ │ ├── arrowKeys.png │ │ ├── autoHeight.png │ │ ├── autoplay.png │ │ ├── base.png │ │ ├── center-autoWidth-loop-edgePadding.png │ │ ├── center-autoWidth-loop.png │ │ ├── center-autoWidth-non-loop-edgePadding.png │ │ ├── center-autoWidth-non-loop.png │ │ ├── center-fixedWidth-loop.png │ │ ├── center-fixedWidth-non-loop.png │ │ ├── center-lazyload-autoWidth-loop.png │ │ ├── center-lazyload-autoWidth-non-loop.png │ │ ├── center-lazyload-fixedWidth-loop.png │ │ ├── center-lazyload-fixedWidth-non-loop.png │ │ ├── center-lazyload-loop.png │ │ ├── center-lazyload-non-loop.png │ │ ├── center-loop.png │ │ ├── center-non-loop.png │ │ ├── customize.png │ │ ├── edgePadding-gutter.png │ │ ├── edgePadding.png │ │ ├── few-items.png │ │ ├── fixedWidth-edgePadding-gutter.png │ │ ├── fixedWidth-edgePadding.png │ │ ├── fixedWidth-gutter.png │ │ ├── fixedWidth.png │ │ ├── frame1.png │ │ ├── frame2.png │ │ ├── frame3.png │ │ ├── frame5.png │ │ ├── frame6.png │ │ ├── gutter.png │ │ ├── lazyload.png │ │ ├── mouse-drag.png │ │ ├── nested.png │ │ ├── non-loop.png │ │ ├── rewind.png │ │ ├── slide-by-page.png │ │ ├── start-index.png │ │ ├── vertical-edgePadding-gutter.png │ │ ├── vertical-edgePadding.png │ │ ├── vertical-gutter.png │ │ └── vertical.png │ ├── edge │ │ ├── animation1.png │ │ ├── animation2.png │ │ ├── arrowKeys.png │ │ ├── autoHeight.png │ │ ├── autoplay.png │ │ ├── base.png │ │ ├── center-autoWidth-loop-edgePadding.png │ │ ├── center-autoWidth-loop.png │ │ ├── center-autoWidth-non-loop-edgePadding.png │ │ ├── center-autoWidth-non-loop.png │ │ ├── center-fixedWidth-loop.png │ │ ├── center-fixedWidth-non-loop.png │ │ ├── center-lazyload-autoWidth-loop.png │ │ ├── center-lazyload-autoWidth-non-loop.png │ │ ├── center-lazyload-fixedWidth-loop.png │ │ ├── center-lazyload-fixedWidth-non-loop.png │ │ ├── center-lazyload-loop.png │ │ ├── center-lazyload-non-loop.png │ │ ├── center-loop.png │ │ ├── center-non-loop.png │ │ ├── customize.png │ │ ├── edgePadding-gutter.png │ │ ├── edgePadding.png │ │ ├── few-items.png │ │ ├── fixedWidth-edgePadding-gutter.png │ │ ├── fixedWidth-edgePadding.png │ │ ├── fixedWidth-gutter.png │ │ ├── fixedWidth.png │ │ ├── frame1.png │ │ ├── frame2.png │ │ ├── frame3.png │ │ ├── frame5.png │ │ ├── frame6.png │ │ ├── gutter.png │ │ ├── lazyload.png │ │ ├── mouse-drag.png │ │ ├── nested.png │ │ ├── non-loop.png │ │ ├── rewind.png │ │ ├── slide-by-page.png │ │ ├── start-index.png │ │ ├── vertical-edgePadding-gutter.png │ │ ├── vertical-edgePadding.png │ │ ├── vertical-gutter.png │ │ └── vertical.png │ ├── firefox │ │ ├── animation1.png │ │ ├── animation2.png │ │ ├── arrowKeys.png │ │ ├── autoHeight.png │ │ ├── autoplay.png │ │ ├── base.png │ │ ├── center-autoWidth-loop-edgePadding.png │ │ ├── center-autoWidth-loop.png │ │ ├── center-autoWidth-non-loop-edgePadding.png │ │ ├── center-autoWidth-non-loop.png │ │ ├── center-fixedWidth-loop.png │ │ ├── center-fixedWidth-non-loop.png │ │ ├── center-lazyload-autoWidth-loop.png │ │ ├── center-lazyload-autoWidth-non-loop.png │ │ ├── center-lazyload-fixedWidth-loop.png │ │ ├── center-lazyload-fixedWidth-non-loop.png │ │ ├── center-lazyload-loop.png │ │ ├── center-lazyload-non-loop.png │ │ ├── center-loop.png │ │ ├── center-non-loop.png │ │ ├── customize.png │ │ ├── edgePadding-gutter.png │ │ ├── edgePadding.png │ │ ├── few-items.png │ │ ├── fixedWidth-edgePadding-gutter.png │ │ ├── fixedWidth-edgePadding.png │ │ ├── fixedWidth-gutter.png │ │ ├── fixedWidth.png │ │ ├── frame1.png │ │ ├── frame2.png │ │ ├── frame3.png │ │ ├── frame5.png │ │ ├── frame6.png │ │ ├── gutter.png │ │ ├── lazyload.png │ │ ├── mouse-drag.png │ │ ├── nested.png │ │ ├── non-loop.png │ │ ├── rewind.png │ │ ├── slide-by-page.png │ │ ├── start-index.png │ │ ├── vertical-edgePadding-gutter.png │ │ ├── vertical-edgePadding.png │ │ ├── vertical-gutter.png │ │ └── vertical.png │ ├── ie │ │ ├── animation1.png │ │ ├── animation2.png │ │ ├── arrowKeys.png │ │ ├── autoHeight.png │ │ ├── autoplay.png │ │ ├── base.png │ │ ├── center-autoWidth-loop-edgePadding.png │ │ ├── center-autoWidth-loop.png │ │ ├── center-autoWidth-non-loop-edgePadding.png │ │ ├── center-autoWidth-non-loop.png │ │ ├── center-fixedWidth-loop.png │ │ ├── center-fixedWidth-non-loop.png │ │ ├── center-lazyload-autoWidth-loop.png │ │ ├── center-lazyload-autoWidth-non-loop.png │ │ ├── center-lazyload-fixedWidth-loop.png │ │ ├── center-lazyload-fixedWidth-non-loop.png │ │ ├── center-lazyload-loop.png │ │ ├── center-lazyload-non-loop.png │ │ ├── center-loop.png │ │ ├── center-non-loop.png │ │ ├── customize.png │ │ ├── edgePadding-gutter.png │ │ ├── edgePadding.png │ │ ├── few-items.png │ │ ├── fixedWidth-edgePadding-gutter.png │ │ ├── fixedWidth-edgePadding.png │ │ ├── fixedWidth-gutter.png │ │ ├── fixedWidth.png │ │ ├── frame1.png │ │ ├── frame2.png │ │ ├── frame3.png │ │ ├── frame5.png │ │ ├── frame6.png │ │ ├── gutter.png │ │ ├── lazyload.png │ │ ├── mouse-drag.png │ │ ├── nested.png │ │ ├── non-loop.png │ │ ├── rewind.png │ │ ├── slide-by-page.png │ │ ├── start-index.png │ │ ├── vertical-edgePadding-gutter.png │ │ ├── vertical-edgePadding.png │ │ ├── vertical-gutter.png │ │ └── vertical.png │ ├── opera │ │ ├── animation1.png │ │ ├── animation2.png │ │ ├── arrowKeys.png │ │ ├── autoHeight.png │ │ ├── autoplay.png │ │ ├── base.png │ │ ├── center-autoWidth-loop-edgePadding.png │ │ ├── center-autoWidth-loop.png │ │ ├── center-autoWidth-non-loop-edgePadding.png │ │ ├── center-autoWidth-non-loop.png │ │ ├── center-fixedWidth-loop.png │ │ ├── center-fixedWidth-non-loop.png │ │ ├── center-lazyload-autoWidth-loop.png │ │ ├── center-lazyload-autoWidth-non-loop.png │ │ ├── center-lazyload-fixedWidth-loop.png │ │ ├── center-lazyload-fixedWidth-non-loop.png │ │ ├── center-lazyload-loop.png │ │ ├── center-lazyload-non-loop.png │ │ ├── center-loop.png │ │ ├── center-non-loop.png │ │ ├── customize.png │ │ ├── edgePadding-gutter.png │ │ ├── edgePadding.png │ │ ├── few-items.png │ │ ├── fixedWidth-edgePadding-gutter.png │ │ ├── fixedWidth-edgePadding.png │ │ ├── fixedWidth-gutter.png │ │ ├── fixedWidth.png │ │ ├── frame1.png │ │ ├── frame2.png │ │ ├── frame3.png │ │ ├── frame5.png │ │ ├── frame6.png │ │ ├── gutter.png │ │ ├── lazyload.png │ │ ├── mouse-drag.png │ │ ├── nested.png │ │ ├── non-loop.png │ │ ├── rewind.png │ │ ├── slide-by-page.png │ │ ├── start-index.png │ │ ├── vertical-edgePadding-gutter.png │ │ ├── vertical-edgePadding.png │ │ ├── vertical-gutter.png │ │ └── vertical.png │ └── safari │ │ ├── animation1.png │ │ ├── animation2.png │ │ ├── arrowKeys.png │ │ ├── autoHeight.png │ │ ├── autoplay.png │ │ ├── base.png │ │ ├── center-autoWidth-loop-edgePadding.png │ │ ├── center-autoWidth-loop.png │ │ ├── center-autoWidth-non-loop-edgePadding.png │ │ ├── center-autoWidth-non-loop.png │ │ ├── center-fixedWidth-loop.png │ │ ├── center-fixedWidth-non-loop.png │ │ ├── center-lazyload-autoWidth-loop.png │ │ ├── center-lazyload-autoWidth-non-loop.png │ │ ├── center-lazyload-fixedWidth-loop.png │ │ ├── center-lazyload-fixedWidth-non-loop.png │ │ ├── center-lazyload-loop.png │ │ ├── center-lazyload-non-loop.png │ │ ├── center-loop.png │ │ ├── center-non-loop.png │ │ ├── customize.png │ │ ├── edgePadding-gutter.png │ │ ├── edgePadding.png │ │ ├── few-items.png │ │ ├── fixedWidth-edgePadding-gutter.png │ │ ├── fixedWidth-edgePadding.png │ │ ├── fixedWidth-gutter.png │ │ ├── fixedWidth.png │ │ ├── frame1.png │ │ ├── frame2.png │ │ ├── frame3.png │ │ ├── frame5.png │ │ ├── frame6.png │ │ ├── gutter.png │ │ ├── lazyload.png │ │ ├── mouse-drag.png │ │ ├── nested.png │ │ ├── non-loop.png │ │ ├── rewind.png │ │ ├── slide-by-page.png │ │ ├── start-index.png │ │ ├── vertical-edgePadding-gutter.png │ │ ├── vertical-edgePadding.png │ │ ├── vertical-gutter.png │ │ └── vertical.png ├── scripts │ └── screenshot.js ├── slide-by-page.html ├── start-index.html ├── tests-mobile.html ├── vertical-edgePadding-gutter.html ├── vertical-edgePadding.html ├── vertical-gutter.html └── vertical.html └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | *.DS_Store 3 | *.codekit 4 | *.sublime-project 5 | *.sublime-workspace 6 | *.scssc 7 | *.swp 8 | *.log 9 | /*.html 10 | *.sketch 11 | 12 | /.codekit-cache/ 13 | /bower_components/ 14 | /node_modules/ 15 | /test/reports/ 16 | /tests_output/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /tests 2 | .env 3 | docker-compose.yml 4 | gulpfile.js -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Tiny-slider 2 | Thanks for considering contributing to Tiny-slider. :tada: :clap: 3 | With the help of contributors like you, Tiny-slider will work better for everyone. 4 | 5 | ### Why this project? 6 | Tiny-slider was strongly inspired by [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/) which is a very powerful and awesome tool to make a slide show. But I don't want to include jQuery just for a slider (Do you?), that's why I started this project. Right now Tiny-slider is still young and may have some issues and lack some features. We can work together to make it much more useful for the whole community. 7 | 8 | ### Features needed: 9 | - [ ] automate test 10 | - [ ] custom build (build Tiny-slider based on your needs) 11 | - [ ] modular 12 | 13 | ## How can I contribute? 14 | 15 | ### Fire an issue 16 | We can't test Tiny-slider on every browser and device. There are always some edge cases in which tiny-slider may not run properly. Fire an issue when it doesn't work for you. This not only helps you, also prevent others from facing the same issue. 17 | **Notes for firing issues:** 18 | - Before you fire an issue, make sure you update to the latest version of each main version. (e.g. v2.9.4 for version 2) 19 | - Provide the OS and browser version. 20 | - Provide a link or your plugin options. 21 | 22 | ### Request missing features 23 | It's those who use tiny-slider shape the future of this project. If there is one missing part which you really need in your project, let us know and we will try to add it. 24 | 25 | ### Submit a pull request 26 | If you know what's wrong or missing and willing to help :heart: :clap: :+1:, follow the following steps: 27 | - Open your command line tool, go to the target directory, clone this project with `git clone git@github.com:ganlanyuan/tiny-slider.git` command. 28 | - Install Docker ([Mac](https://store.docker.com/editions/community/docker-ce-desktop-mac), [Windows](https://store.docker.com/editions/community/docker-ce-desktop-windows)) and run. 29 | - Pull the required image with `docker pull cmcdev/web` in the command line tool. 30 | - Run `docker-compose up` in the command line tool after located in the cloned directory. 31 | - Make changes in "src/tiny-slider.js", "src/tiny-slider.helper.ie8.js" or "src/tiny-slider.scss" and a series of tasks will automatically run to minify, compile source files to final js and CSS files. 32 | - Test the project with "http://localhost:3000/test/index.html". 33 | - Turn down Docker with `docker-compose down -v` following command + C (Mac). 34 | 35 | NOTE: If you don't want to get complicated, just make changes to "src/tiny-slider.js", "src/tiny-slider.helper.ie8.js" or "src/tiny-slider.scss" and send a pull request. 36 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | __Issue description__: 2 | 3 | __Demo link/slider setting__: 4 | 5 | _Tiny-slider version_: 6 | _Browser name && version_: 7 | _OS name && version_: -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 William Lin 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 all 13 | 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 THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tiny-slider", 3 | "version": "2.9.4", 4 | "homepage": "https://github.com/ganlanyuan/tiny-slider", 5 | "authors": [ 6 | "WilliamLin " 7 | ], 8 | "description": "Tiny slider for all purposes.", 9 | "main": [ 10 | "dist/tiny-slider.css", 11 | "dist/tiny-slider.js" 12 | ], 13 | "moduleType": [], 14 | "keywords": [ 15 | "slider", 16 | "tiny" 17 | ], 18 | "license": "MIT", 19 | "ignore": [ 20 | "**/.*", 21 | "node_modules", 22 | "bower_components", 23 | "test", 24 | "tests", 25 | ".env", 26 | "docker-compose.yml", 27 | "gulpfile.js" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /browserstack.conf.js: -------------------------------------------------------------------------------- 1 | nightwatch_config = { 2 | src_folders : [ 'test/scripts' ], 3 | 4 | selenium : { 5 | 'start_process': false, 6 | 'host': 'hub-cloud.browserstack.com', 7 | 'port': 80 8 | }, 9 | 10 | common_capabilities: { 11 | 'browserstack.user': '${BS_USERNAME}', 12 | 'browserstack.key': '${BS_ACCESS_KEY}' 13 | }, 14 | 15 | test_settings: { 16 | default: { 17 | desiredCapabilities: { 18 | 'os': 'Windows', 19 | 'os_version': '7', 20 | 'browser': 'Chrome', 21 | 'browser_version': '14.0', 22 | 'resolution': '1024x768' 23 | } 24 | }, 25 | chrome: { 26 | desiredCapabilities: { 27 | 'os': 'Windows', 28 | 'os_version': '7', 29 | 'browser': 'Chrome', 30 | 'browser_version': '14.0', 31 | 'resolution': '1024x768' 32 | } 33 | }, 34 | firefox: { 35 | desiredCapabilities: { 36 | 'os': 'Windows', 37 | 'os_version': '7', 38 | 'browser': 'Firefox', 39 | 'browser_version': '12.0', 40 | 'resolution': '1024x768' 41 | } 42 | }, 43 | ie: { 44 | desiredCapabilities: { 45 | 'os': 'Windows', 46 | 'os_version': '7', 47 | 'browser': 'IE', 48 | 'browser_version': '9.0', 49 | 'resolution': '1024x768' 50 | } 51 | }, 52 | edge: { 53 | desiredCapabilities: { 54 | 'os': 'Windows', 55 | 'os_version': '10', 56 | 'browser': 'Edge', 57 | 'browser_version': '15.0', 58 | 'resolution': '1024x768' 59 | } 60 | }, 61 | safari: { 62 | desiredCapabilities: { 63 | 'os': 'OS X', 64 | 'os_version': 'Snow Leopard', 65 | 'browser': 'Safari', 66 | 'browser_version': '5.1', 67 | 'resolution': '1024x768' 68 | } 69 | }, 70 | opera: { 71 | desiredCapabilities: { 72 | 'os': 'Windows', 73 | 'os_version': '7', 74 | 'browser': 'Opera', 75 | 'browser_version': '12.15', 76 | 'resolution': '1024x768' 77 | } 78 | }, 79 | } 80 | }; 81 | 82 | // Code to support common capabilites 83 | for(var i in nightwatch_config.test_settings){ 84 | var config = nightwatch_config.test_settings[i], 85 | browser_name = i; 86 | config['selenium_host'] = nightwatch_config.selenium.host; 87 | config['selenium_port'] = nightwatch_config.selenium.port; 88 | config['desiredCapabilities'] = config['desiredCapabilities'] || {}; 89 | config['globals'] = { 90 | 'browser_name': browser_name, 91 | 'abortOnAssertionFailure': false 92 | }; 93 | for(var j in nightwatch_config.common_capabilities){ 94 | config['desiredCapabilities'][j] = config['desiredCapabilities'][j] || nightwatch_config.common_capabilities[j]; 95 | // config['desiredCapabilities']['browserstack.local'] = true; 96 | } 97 | } 98 | 99 | module.exports = nightwatch_config; -------------------------------------------------------------------------------- /demo/css/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=clike+javascript */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | background: none; 12 | text-shadow: 0 1px white; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 33 | text-shadow: none; 34 | background: #b3d4fc; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | text-shadow: none; 40 | background: #b3d4fc; 41 | } 42 | 43 | @media print { 44 | code[class*="language-"], 45 | pre[class*="language-"] { 46 | text-shadow: none; 47 | } 48 | } 49 | 50 | /* Code blocks */ 51 | pre[class*="language-"] { 52 | padding: 1em; 53 | margin: .5em 0; 54 | overflow: auto; 55 | } 56 | 57 | :not(pre) > code[class*="language-"], 58 | pre[class*="language-"] { 59 | background: #f5f2f0; 60 | } 61 | 62 | /* Inline code */ 63 | :not(pre) > code[class*="language-"] { 64 | padding: .1em; 65 | border-radius: .3em; 66 | white-space: normal; 67 | } 68 | 69 | .token.comment, 70 | .token.prolog, 71 | .token.doctype, 72 | .token.cdata { 73 | color: slategray; 74 | } 75 | 76 | .token.punctuation { 77 | color: #999; 78 | } 79 | 80 | .namespace { 81 | opacity: .7; 82 | } 83 | 84 | .token.property, 85 | .token.tag, 86 | .token.boolean, 87 | .token.number, 88 | .token.constant, 89 | .token.symbol, 90 | .token.deleted { 91 | color: #905; 92 | } 93 | 94 | .token.selector, 95 | .token.attr-name, 96 | .token.string, 97 | .token.char, 98 | .token.builtin, 99 | .token.inserted { 100 | color: #690; 101 | } 102 | 103 | .token.operator, 104 | .token.entity, 105 | .token.url, 106 | .language-css .token.string, 107 | .style .token.string { 108 | color: #a67f59; 109 | background: hsla(0, 0%, 100%, .5); 110 | } 111 | 112 | .token.atrule, 113 | .token.attr-value, 114 | .token.keyword { 115 | color: #07a; 116 | } 117 | 118 | .token.function { 119 | color: #DD4A68; 120 | } 121 | 122 | .token.regex, 123 | .token.important, 124 | .token.variable { 125 | color: #e90; 126 | } 127 | 128 | .token.important, 129 | .token.bold { 130 | font-weight: bold; 131 | } 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.entity { 137 | cursor: help; 138 | } 139 | 140 | -------------------------------------------------------------------------------- /demo/images/angle-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganlanyuan/tiny-slider/4d709735c417c2483e77a22d017fc1b18c04f0d4/demo/images/angle-left.png -------------------------------------------------------------------------------- /demo/images/angle-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganlanyuan/tiny-slider/4d709735c417c2483e77a22d017fc1b18c04f0d4/demo/images/angle-right.png -------------------------------------------------------------------------------- /dist/min/tiny-slider.helper.ie8.js: -------------------------------------------------------------------------------- 1 | Array.prototype.forEach||(Array.prototype.forEach=function(e,t){for(var n=this.length>>>0,r=0;r>>0;if("function"!=typeof e)throw new TypeError;for(var n=new Array(t),r=arguments[1],o=0;o.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active{position:relative;left:auto !important}.tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left} 2 | 3 | /*# sourceMappingURL=sourcemaps/tiny-slider.css.map */ 4 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '2' 2 | 3 | services: 4 | web: 5 | image: cmcdev/web:2.7.3 6 | ports: 7 | - 3000:3000 8 | # - 3001:3001 9 | volumes: 10 | - .:/www/web/ 11 | working_dir: /www/web 12 | container_name: tiny-slider 13 | entrypoint: sh /www/start.sh 14 | stdin_open: true 15 | tty: true -------------------------------------------------------------------------------- /features.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganlanyuan/tiny-slider/4d709735c417c2483e77a22d017fc1b18c04f0d4/features.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tiny-slider", 3 | "version": "2.9.4", 4 | "description": "Vanilla javascript slider for all purposes, inspired by Owl Carousel.", 5 | "main": "dist/tiny-slider.js", 6 | "types": "src/tiny-slider.d.ts", 7 | "directories": { 8 | "test": "test" 9 | }, 10 | "scripts": { 11 | "ngrok": "~/ngrok http 3000", 12 | "start": "nodemon --watch test/js/tests-async.js --exec npm run compile", 13 | "compile": "npx babel test/js/tests-async.js -o test/js/tests-async-es5.js", 14 | "build": "rollup --config rollup.config.js", 15 | "build-watch": "babel --watch src -o dist/tiny-slider.js", 16 | "prepare": "npm run build", 17 | "test": "nightwatch -c browserstack.conf.js -e chrome,firefox,ie,edge,safari,opera", 18 | "chrome": "nightwatch -c browserstack.conf.js -e chrome", 19 | "firefox": "nightwatch -c browserstack.conf.js -e firefox", 20 | "ie": "nightwatch -c browserstack.conf.js -e ie", 21 | "edge": "nightwatch -c browserstack.conf.js -e edge", 22 | "safari": "nightwatch -c browserstack.conf.js -e safari", 23 | "opera": "nightwatch -c browserstack.conf.js -e opera" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/ganlanyuan/tiny-slider.git" 28 | }, 29 | "files": [ 30 | "dist", 31 | "src" 32 | ], 33 | "keywords": [], 34 | "author": "ganlanyuan ", 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/ganlanyuan/tiny-slider/issues" 38 | }, 39 | "browserslist": "> 0.25%, not dead", 40 | "homepage": "https://github.com/ganlanyuan/tiny-slider#readme", 41 | "devDependencies": { 42 | "@babel/cli": "^7.14.8", 43 | "@babel/core": "^7.15.0", 44 | "@babel/polyfill": "^7.12.1", 45 | "@babel/preset-env": "^7.15.0", 46 | "@rollup/plugin-babel": "^5.3.0", 47 | "@rollup/plugin-commonjs": "^20.0.0", 48 | "nightwatch": "^1.7.11", 49 | "nodemon": "^2.0.3", 50 | "rollup": "^2.56.3" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import { babel } from '@rollup/plugin-babel'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | 4 | const config = { 5 | input: 'src/tiny-slider.js', 6 | output: { 7 | file: 'dist/tiny-slider.js', 8 | format: 'cjs' 9 | }, 10 | plugins: [ 11 | commonjs({ defaultIsModuleExports: false }), 12 | babel({ babelHelpers: 'bundled' }) 13 | ], 14 | }; 15 | 16 | export default config; 17 | -------------------------------------------------------------------------------- /src/helpers/addCSSRule.js: -------------------------------------------------------------------------------- 1 | // cross browsers addRule method 2 | import { raf } from './raf.js'; 3 | export function addCSSRule(sheet, selector, rules, index) { 4 | // return raf(function() { 5 | 'insertRule' in sheet ? 6 | sheet.insertRule(selector + '{' + rules + '}', index) : 7 | sheet.addRule(selector, rules, index); 8 | // }); 9 | } -------------------------------------------------------------------------------- /src/helpers/addClass.js: -------------------------------------------------------------------------------- 1 | import { classListSupport, hasClass } from './hasClass.js'; 2 | var addClass = classListSupport ? 3 | function (el, str) { 4 | if (!hasClass(el, str)) { el.classList.add(str); } 5 | } : 6 | function (el, str) { 7 | if (!hasClass(el, str)) { el.className += ' ' + str; } 8 | }; 9 | 10 | export { addClass }; -------------------------------------------------------------------------------- /src/helpers/addEvents.js: -------------------------------------------------------------------------------- 1 | import { passiveOption } from './passiveOption.js'; 2 | 3 | export function addEvents(el, obj, preventScrolling) { 4 | for (var prop in obj) { 5 | var option = ['touchstart', 'touchmove'].indexOf(prop) >= 0 && !preventScrolling ? passiveOption : false; 6 | el.addEventListener(prop, obj[prop], option); 7 | } 8 | } -------------------------------------------------------------------------------- /src/helpers/arrayFromNodeList.js: -------------------------------------------------------------------------------- 1 | export function arrayFromNodeList (nl) { 2 | var arr = []; 3 | for (var i = 0, l = nl.length; i < l; i++) { 4 | arr.push(nl[i]); 5 | } 6 | return arr; 7 | } -------------------------------------------------------------------------------- /src/helpers/caf.js: -------------------------------------------------------------------------------- 1 | var win = window; 2 | 3 | export var caf = win.cancelAnimationFrame 4 | || win.mozCancelAnimationFrame 5 | || function(id){ clearTimeout(id); }; 6 | -------------------------------------------------------------------------------- /src/helpers/calc.js: -------------------------------------------------------------------------------- 1 | // get css-calc 2 | // @return - false | calc | -webkit-calc | -moz-calc 3 | // @usage - var calc = getCalc(); 4 | import { getBody } from './getBody.js'; 5 | import { setFakeBody } from './setFakeBody.js'; 6 | import { resetFakeBody } from './resetFakeBody.js'; 7 | 8 | export function calc() { 9 | var doc = document, 10 | body = getBody(), 11 | docOverflow = setFakeBody(body), 12 | div = doc.createElement('div'), 13 | result = false; 14 | 15 | body.appendChild(div); 16 | try { 17 | var str = '(10px * 10)', 18 | vals = ['calc' + str, '-moz-calc' + str, '-webkit-calc' + str], 19 | val; 20 | for (var i = 0; i < 3; i++) { 21 | val = vals[i]; 22 | div.style.width = val; 23 | if (div.offsetWidth === 100) { 24 | result = val.replace(str, ''); 25 | break; 26 | } 27 | } 28 | } catch (e) {} 29 | 30 | body.fake ? resetFakeBody(body, docOverflow) : div.remove(); 31 | 32 | return result; 33 | } -------------------------------------------------------------------------------- /src/helpers/checkStorageValue.js: -------------------------------------------------------------------------------- 1 | export function checkStorageValue (value) { 2 | return ['true', 'false'].indexOf(value) >= 0 ? JSON.parse(value) : value; 3 | } -------------------------------------------------------------------------------- /src/helpers/classListSupport.js: -------------------------------------------------------------------------------- 1 | export var classListSupport = 'classList' in document.createElement('_'); -------------------------------------------------------------------------------- /src/helpers/createStyleSheet.js: -------------------------------------------------------------------------------- 1 | // create and append style sheet 2 | export function createStyleSheet (media, nonce) { 3 | // Create the