├── .circleci └── config.yml ├── .github ├── CONTRIBUTING.md └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── .travis.yml ├── README.md ├── build └── setup_puppeteer.sh ├── docs ├── .nojekyll ├── 404.html ├── CNAME ├── assets │ ├── css │ │ └── styles.5917f3d4.css │ └── js │ │ ├── 02715c9e.a9577c34.js │ │ ├── 0cfffc30.8d358735.js │ │ ├── 12a9bfa3.cf2f8344.js │ │ ├── 17896441.c446cda8.js │ │ ├── 1be78505.972da294.js │ │ ├── 1facfea9.cb11c4a5.js │ │ ├── 210.89fee88e.js │ │ ├── 297.4921ec44.js │ │ ├── 44e1d84d.a594b287.js │ │ ├── 45aab7e5.8cef2f6d.js │ │ ├── 46c01466.b3ca325d.js │ │ ├── 486.728728c8.js │ │ ├── 486.728728c8.js.LICENSE.txt │ │ ├── 491b9794.a4ff83e2.js │ │ ├── 4ab0367d.09629d29.js │ │ ├── 5fbc5cf1.a31c0ebb.js │ │ ├── 608.3a880a97.js │ │ ├── 6129226b.a4fb817b.js │ │ ├── 7370c1e4.1edc5681.js │ │ ├── 7485ae2a.e2c6eec8.js │ │ ├── 763.91dce816.js │ │ ├── 85aa4e65.7515fe20.js │ │ ├── 935f2afb.481eabbc.js │ │ ├── 9beb87c2.884ca2e1.js │ │ ├── a9ce9a62.db719a2f.js │ │ ├── ba14948d.2ee01932.js │ │ ├── c4f5d8e4.283c7396.js │ │ ├── c66111f0.375da0e0.js │ │ ├── main.049b56e6.js │ │ ├── main.049b56e6.js.LICENSE.txt │ │ └── runtime~main.79a91d68.js ├── blog │ ├── atom.xml │ └── rss.xml ├── docs │ ├── 0.1.x │ │ ├── api │ │ │ └── index.html │ │ ├── changelog │ │ │ └── index.html │ │ ├── demo │ │ │ └── index.html │ │ └── index.html │ ├── 1.x │ │ ├── api │ │ │ └── index.html │ │ ├── changelog │ │ │ └── index.html │ │ ├── demo │ │ │ └── index.html │ │ └── index.html │ ├── api │ │ └── index.html │ ├── changelog │ │ └── index.html │ ├── demo │ │ └── index.html │ ├── index.html │ └── next │ │ ├── api │ │ └── index.html │ │ ├── changelog │ │ └── index.html │ │ └── index.html ├── img │ ├── arrow-left.svg │ ├── arrow-right.svg │ ├── bg-m.svg │ ├── favicon.ico │ ├── logo.png │ ├── logo.svg │ └── stackblitz-icon.svg ├── index.html └── sitemap.xml ├── lerna.json ├── package.json ├── packages ├── tiny-swiper │ ├── .babelrc │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── LOGO.png │ ├── README.md │ ├── __test__ │ │ ├── common.ts │ │ ├── smoke │ │ │ ├── instance.spec.ts │ │ │ └── modules │ │ │ │ ├── autoPlay.spec.ts │ │ │ │ ├── keyboardControl.spec.ts │ │ │ │ ├── lazyload.spec.ts │ │ │ │ ├── mousewheel.spec.ts │ │ │ │ ├── navigation.spec.ts │ │ │ │ └── pagination.spec.ts │ │ ├── unit │ │ │ ├── actions.spec.ts │ │ │ ├── animation.spec.ts │ │ │ ├── eventHub.spec.ts │ │ │ ├── operations.spec.ts │ │ │ ├── sensor.spec.ts │ │ │ ├── state.spec.ts │ │ │ ├── timing.spec.ts │ │ │ └── trace.spec.ts │ │ └── utils.ts │ ├── demo │ │ ├── autoPlay.html │ │ ├── breakpoints.html │ │ ├── default.html │ │ ├── freeMode.html │ │ ├── keyboard.html │ │ ├── lazyload.html │ │ ├── loop.html │ │ ├── mousewheel.html │ │ ├── navigation.html │ │ ├── pagination.html │ │ ├── resize.html │ │ ├── scrollEvent.html │ │ ├── slidesPerView.html │ │ └── vertical.html │ ├── jest.config.js │ ├── lib │ │ ├── index.esm.js │ │ ├── index.esm.js.map │ │ ├── index.full.js │ │ ├── index.full.js.map │ │ ├── index.js │ │ ├── index.js.map │ │ ├── index.min.js │ │ └── modules │ │ │ ├── autoPlay.js │ │ │ ├── autoPlay.js.map │ │ │ ├── autoPlay.min.js │ │ │ ├── breakpoints.js │ │ │ ├── breakpoints.js.map │ │ │ ├── breakpoints.min.js │ │ │ ├── keyboardControl.js │ │ │ ├── keyboardControl.js.map │ │ │ ├── keyboardControl.min.js │ │ │ ├── lazyload.js │ │ │ ├── lazyload.js.map │ │ │ ├── lazyload.min.js │ │ │ ├── mousewheel.js │ │ │ ├── mousewheel.js.map │ │ │ ├── mousewheel.min.js │ │ │ ├── navigation.js │ │ │ ├── navigation.js.map │ │ │ ├── navigation.min.js │ │ │ ├── pagination.js │ │ │ ├── pagination.js.map │ │ │ └── pagination.min.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── core │ │ │ ├── env │ │ │ │ ├── element.ts │ │ │ │ ├── index.ts │ │ │ │ ├── limitation.ts │ │ │ │ └── measure.ts │ │ │ ├── eventHub.ts │ │ │ ├── index.ts │ │ │ ├── options.ts │ │ │ ├── render │ │ │ │ ├── animation.ts │ │ │ │ ├── dom.ts │ │ │ │ ├── index.ts │ │ │ │ ├── layout.ts │ │ │ │ ├── nextTick.ts │ │ │ │ └── timing.ts │ │ │ ├── sensor │ │ │ │ ├── actions.ts │ │ │ │ └── index.ts │ │ │ └── state │ │ │ │ ├── index.ts │ │ │ │ ├── operations.ts │ │ │ │ └── trace.ts │ │ ├── index.esm.ts │ │ ├── index.full.ts │ │ ├── index.ts │ │ └── modules │ │ │ ├── autoPlay.ts │ │ │ ├── breakpoints.ts │ │ │ ├── keyboardControl.ts │ │ │ ├── lazyload.ts │ │ │ ├── mousewheel.ts │ │ │ ├── navigation.ts │ │ │ └── pagination.ts │ ├── tsconfig.json │ ├── types │ │ ├── core │ │ │ ├── env │ │ │ │ ├── element.d.ts │ │ │ │ ├── index.d.ts │ │ │ │ ├── limitation.d.ts │ │ │ │ └── measure.d.ts │ │ │ ├── eventHub.d.ts │ │ │ ├── index.d.ts │ │ │ ├── options.d.ts │ │ │ ├── render │ │ │ │ ├── animation.d.ts │ │ │ │ ├── dom.d.ts │ │ │ │ ├── index.d.ts │ │ │ │ ├── layout.d.ts │ │ │ │ ├── nextTick.d.ts │ │ │ │ └── timing.d.ts │ │ │ ├── sensor │ │ │ │ ├── actions.d.ts │ │ │ │ └── index.d.ts │ │ │ └── state │ │ │ │ ├── index.d.ts │ │ │ │ ├── operations.d.ts │ │ │ │ └── trace.d.ts │ │ ├── index.d.ts │ │ ├── index.esm.d.ts │ │ ├── index.full.d.ts │ │ └── modules │ │ │ ├── autoPlay.d.ts │ │ │ ├── breakpoints.d.ts │ │ │ ├── keyboardControl.d.ts │ │ │ ├── lazyload.d.ts │ │ │ ├── mousewheel.d.ts │ │ │ ├── navigation.d.ts │ │ │ └── pagination.d.ts │ └── yarn.lock └── website │ ├── .gitignore │ ├── CHANGELOG.md │ ├── CNAME │ ├── README.md │ ├── babel.config.js │ ├── docs │ ├── api.md │ ├── changelog.md │ └── get-started.md │ ├── docusaurus.config.js │ ├── package.json │ ├── sidebars.js │ ├── src │ ├── components │ │ └── Demo │ │ │ ├── index.jsx │ │ │ └── index.scss │ ├── css │ │ └── custom.css │ ├── pages │ │ ├── index.js │ │ ├── styles.module.css │ │ └── styles.module.scss │ └── theme │ │ └── ReactLiveScope │ │ └── index.js │ ├── static │ ├── .nojekyll │ └── img │ │ ├── arrow-left.svg │ │ ├── arrow-right.svg │ │ ├── bg-m.svg │ │ ├── favicon.ico │ │ ├── logo.png │ │ ├── logo.svg │ │ └── stackblitz-icon.svg │ ├── tsconfig.json │ ├── versioned_docs │ ├── version-0.1.x │ │ ├── api.md │ │ ├── changelog.md │ │ ├── demo.md │ │ └── get-started.md │ ├── version-1.x │ │ ├── api.md │ │ ├── changelog.md │ │ ├── demo.md │ │ └── get-started.md │ └── version-2.x │ │ ├── api.md │ │ ├── changelog.md │ │ ├── demo.md │ │ └── get-started.md │ ├── versioned_sidebars │ ├── version-0.1.x-sidebars.json │ ├── version-1.x-sidebars.json │ └── version-2.x-sidebars.json │ ├── versions.json │ └── yarn.lock └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | - image: circleci/node:10.16.0 11 | # Specify service dependencies here if necessary 12 | # CircleCI maintains a library of pre-built images 13 | # documented at https://circleci.com/docs/2.0/circleci-images/ 14 | 15 | working_directory: ~/tiny-swiper 16 | 17 | steps: 18 | - checkout 19 | 20 | # Download and cache dependencies 21 | - restore_cache: 22 | keys: 23 | - v1-dependencies-{{ checksum "package.json" }} 24 | # fallback to using the latest cache if no exact match is found 25 | - v1-dependencies- 26 | # - run: 27 | # name: Workaround for GoogleChrome/puppeteer#290 28 | # command: 'sh ./build/setup_puppeteer.sh' 29 | - run: npm install lerna 30 | - run: npm run bootstrap 31 | - save_cache: 32 | paths: 33 | - node_modules 34 | key: v1-dependencies-{{ checksum "package.json" }} 35 | 36 | # run tests! 37 | - run: npm run build 38 | - run: npm run test 39 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guide to Tiny-Swiper 2 | 3 | If you want contribute to Tiny-Swiper, here are something you should familiar with. 4 | 5 | ## Project Structure 6 | 7 | - `packages/tiny-swiper`: Main package of Tiny-Swiper. 8 | 9 | - `lib`: Built implementation files for distribution. Do **NOT** modify it manually. 10 | 11 | - `types`: TypeScript type declaration files for distribution. Generated automatically. 12 | 13 | - `src`: Source code of Tiny-Swiper. 14 | 15 | - `core`: Core module. 16 | - `modules`: Tiny-Swiper plugins. 17 | 18 | - `__test__`: Unit/E2E test cases. 19 | 20 | - `packages/website`: Documentation website 21 | 22 | ## Development setup 23 | 24 | Make sure that you have Node.js version 12+, lerna and yarn. 25 | 26 | After forking and clone the repo, run 27 | 28 | ```shell 29 | lerna bootstrap 30 | ``` 31 | 32 | Check `packages/tiny-swiper` directory and run 33 | 34 | ```shell 35 | npm run dev 36 | ``` 37 | 38 | if you are going to update something of Tiny-Swiper main package. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **Expected behavior** 14 | A clear and concise description of what you expected to happen. 15 | 16 | **Information** 17 | - Tiny-Swiper Version: [e.g. v1.0.0] 18 | - OS: [e.g. iOS] 19 | - Browser: [e.g. chrome 62] 20 | - Reproduce example：[e.g. https://codier.io/creation/BymYF8VYr] 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .nyc_output 3 | coverage 4 | .DS_Store 5 | package-lock.json 6 | .idea 7 | .vscode 8 | *.log 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | cache: 3 | directories: 4 | - ~/.npm 5 | - node_modules 6 | addons: 7 | chrome: stable 8 | node_js: 9 | - stable 10 | - '13' 11 | before_install: 12 | # - sh ./build/setup_puppeteer.sh 13 | install: 14 | - npm install lerna 15 | - npm run bootstrap 16 | script: 17 | - npm run build 18 | - npm run test 19 | - npm run report 20 | -------------------------------------------------------------------------------- /build/setup_puppeteer.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | sudo apt-get update 4 | sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \ 5 | libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \ 6 | libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \ 7 | libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \ 8 | ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget --fix-missing -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe223/tiny-swiper/aca4f989fa75ec9907b99fcbbfcd10cf99893339/docs/.nojekyll -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | tiny-swiper.js.org 2 | -------------------------------------------------------------------------------- /docs/assets/js/02715c9e.a9577c34.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunktiny_swiper_website=self.webpackChunktiny_swiper_website||[]).push([[535],{5995:function(e){"use strict";e.exports=JSON.parse('{"pluginId":"default","version":"1.x","label":"1.x","isLast":false,"docsSidebars":{"version-1.x/someSidebar":[{"collapsed":true,"type":"category","label":"Guide","items":[{"type":"link","label":"Get Started","href":"/docs/1.x/"},{"type":"link","label":"APIs","href":"/docs/1.x/api"}]},{"type":"link","label":"Demo","href":"/docs/1.x/demo"},{"type":"link","label":"Changelog","href":"/docs/1.x/changelog"}]},"permalinkToSidebar":{"/docs/1.x/api":"version-1.x/someSidebar","/docs/1.x/changelog":"version-1.x/someSidebar","/docs/1.x/demo":"version-1.x/someSidebar","/docs/1.x/":"version-1.x/someSidebar"}}')}}]); -------------------------------------------------------------------------------- /docs/assets/js/1facfea9.cb11c4a5.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunktiny_swiper_website=self.webpackChunktiny_swiper_website||[]).push([[179],{321:function(e){"use strict";e.exports=JSON.parse('{"pluginId":"default","version":"0.1.x","label":"0.1.x","isLast":false,"docsSidebars":{"version-0.1.x/someSidebar":[{"collapsed":true,"type":"category","label":"Guide","items":[{"type":"link","label":"Get Started","href":"/docs/0.1.x/"},{"type":"link","label":"APIs","href":"/docs/0.1.x/api"},{"type":"link","label":"Demo","href":"/docs/0.1.x/demo"}]},{"collapsed":true,"type":"category","label":"Changelog","items":[{"type":"link","label":"Changelog","href":"/docs/0.1.x/changelog"}]}]},"permalinkToSidebar":{"/docs/0.1.x/api":"version-0.1.x/someSidebar","/docs/0.1.x/changelog":"version-0.1.x/someSidebar","/docs/0.1.x/demo":"version-0.1.x/someSidebar","/docs/0.1.x/":"version-0.1.x/someSidebar"}}')}}]); -------------------------------------------------------------------------------- /docs/assets/js/45aab7e5.8cef2f6d.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunktiny_swiper_website=self.webpackChunktiny_swiper_website||[]).push([[499],{4879:function(e){"use strict";e.exports=JSON.parse('{"pluginId":"default","version":"2.x","label":"2.x","isLast":true,"docsSidebars":{"version-2.x/someSidebar":[{"collapsed":true,"type":"category","label":"Guide","items":[{"type":"link","label":"Get Started","href":"/docs/"},{"type":"link","label":"APIs","href":"/docs/api"}]},{"type":"link","label":"Demos","href":"/docs/demo"},{"collapsed":true,"type":"category","label":"APIs","items":[]},{"collapsed":true,"type":"category","label":"Changelog","items":[{"type":"link","label":"Changelog","href":"/docs/changelog"}]}]},"permalinkToSidebar":{"/docs/api":"version-2.x/someSidebar","/docs/changelog":"version-2.x/someSidebar","/docs/demo":"version-2.x/someSidebar","/docs/":"version-2.x/someSidebar"}}')}}]); -------------------------------------------------------------------------------- /docs/assets/js/486.728728c8.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! ***************************************************************************** 2 | Copyright (c) Microsoft Corporation. 3 | 4 | Permission to use, copy, modify, and/or distribute this software for any 5 | purpose with or without fee is hereby granted. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 8 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 9 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 10 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 11 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 12 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 13 | PERFORMANCE OF THIS SOFTWARE. 14 | ***************************************************************************** */ 15 | -------------------------------------------------------------------------------- /docs/assets/js/608.3a880a97.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunktiny_swiper_website=self.webpackChunktiny_swiper_website||[]).push([[608],{4608:function(e,t,n){"use strict";n.r(t);var a=n(7294),o=n(2297),i=n(4973);t.default=function(){return a.createElement(o.Z,{title:"Page Not Found"},a.createElement("main",{className:"container margin-vert--xl"},a.createElement("div",{className:"row"},a.createElement("div",{className:"col col--6 col--offset-3"},a.createElement("h1",{className:"hero__title"},a.createElement(i.Z,{id:"theme.NotFound.title",description:"The title of the 404 page"},"Page Not Found")),a.createElement("p",null,a.createElement(i.Z,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page"},"We could not find what you were looking for.")),a.createElement("p",null,a.createElement(i.Z,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page"},"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."))))))}}}]); -------------------------------------------------------------------------------- /docs/assets/js/935f2afb.481eabbc.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunktiny_swiper_website=self.webpackChunktiny_swiper_website||[]).push([[53],{9054:function(e){"use strict";e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","isLast":false,"docsSidebars":{"someSidebar":[{"collapsed":true,"type":"category","label":"Guide","items":[{"type":"link","label":"Get Started","href":"/docs/next/"},{"type":"link","label":"APIs","href":"/docs/next/api"}]},{"collapsed":true,"type":"category","label":"APIs","items":[]},{"collapsed":true,"type":"category","label":"Changelog","items":[{"type":"link","label":"v2.0.0","href":"/docs/next/changelog"}]}]},"permalinkToSidebar":{"/docs/next/api":"someSidebar","/docs/next/changelog":"someSidebar","/docs/next/":"someSidebar"}}')}}]); -------------------------------------------------------------------------------- /docs/assets/js/9beb87c2.884ca2e1.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunktiny_swiper_website=self.webpackChunktiny_swiper_website||[]).push([[80],{3905:function(e,t,r){"use strict";r.d(t,{kt:function(){return f}});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=n.createContext({}),p=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},s=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),f=p(r),d=o,m=f["".concat(l,".").concat(d)]||f[d]||u[d]||a;return r?n.createElement(m,i(i({ref:t},s),{},{components:r})):n.createElement(m,i({ref:t},s))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=s;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var p=2;p\n \x3c!-- Additional required wrapper --\x3e\n
\n \x3c!-- Slides --\x3e\n
Slide 1
\n
Slide 2
\n
Slide 3
\n ...\n
\n \x3c!-- If we need pagination --\x3e\n
\n'))))}}}]); -------------------------------------------------------------------------------- /docs/assets/js/main.049b56e6.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress 8 | * @license MIT */ 9 | 10 | /** @license React v0.19.1 11 | * scheduler.production.min.js 12 | * 13 | * Copyright (c) Facebook, Inc. and its affiliates. 14 | * 15 | * This source code is licensed under the MIT license found in the 16 | * LICENSE file in the root directory of this source tree. 17 | */ 18 | 19 | /** @license React v16.13.1 20 | * react-is.production.min.js 21 | * 22 | * Copyright (c) Facebook, Inc. and its affiliates. 23 | * 24 | * This source code is licensed under the MIT license found in the 25 | * LICENSE file in the root directory of this source tree. 26 | */ 27 | 28 | /** @license React v16.14.0 29 | * react-dom.production.min.js 30 | * 31 | * Copyright (c) Facebook, Inc. and its affiliates. 32 | * 33 | * This source code is licensed under the MIT license found in the 34 | * LICENSE file in the root directory of this source tree. 35 | */ 36 | 37 | /** @license React v16.14.0 38 | * react.production.min.js 39 | * 40 | * Copyright (c) Facebook, Inc. and its affiliates. 41 | * 42 | * This source code is licensed under the MIT license found in the 43 | * LICENSE file in the root directory of this source tree. 44 | */ 45 | -------------------------------------------------------------------------------- /docs/blog/atom.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | https://tiny-swiper.js.org/blog 4 | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins Blog 5 | 2015-10-25T23:29:00.000Z 6 | https://github.com/jpmonette/feed 7 | 8 | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins Blog 9 | https://tiny-swiper.js.org/img/favicon.ico 10 | -------------------------------------------------------------------------------- /docs/blog/rss.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins Blog 5 | https://tiny-swiper.js.org/blog 6 | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins Blog 7 | Sun, 25 Oct 2015 23:29:00 GMT 8 | https://validator.w3.org/feed/docs/rss2.html 9 | https://github.com/jpmonette/feed 10 | 11 | -------------------------------------------------------------------------------- /docs/img/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | icon左 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/img/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | icon左备份 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/img/bg-m.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 编组 7 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe223/tiny-swiper/aca4f989fa75ec9907b99fcbbfcd10cf99893339/docs/img/favicon.ico -------------------------------------------------------------------------------- /docs/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe223/tiny-swiper/aca4f989fa75ec9907b99fcbbfcd10cf99893339/docs/img/logo.png -------------------------------------------------------------------------------- /docs/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | LOGO备份 3 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/img/stackblitz-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/sitemap.xml: -------------------------------------------------------------------------------- 1 | https://tiny-swiper.js.org/weekly0.5https://tiny-swiper.js.org/docs/0.1.x/weekly0.5https://tiny-swiper.js.org/docs/0.1.x/apiweekly0.5https://tiny-swiper.js.org/docs/0.1.x/changelogweekly0.5https://tiny-swiper.js.org/docs/0.1.x/demoweekly0.5https://tiny-swiper.js.org/docs/1.x/weekly0.5https://tiny-swiper.js.org/docs/1.x/apiweekly0.5https://tiny-swiper.js.org/docs/1.x/changelogweekly0.5https://tiny-swiper.js.org/docs/1.x/demoweekly0.5https://tiny-swiper.js.org/docs/next/weekly0.5https://tiny-swiper.js.org/docs/next/apiweekly0.5https://tiny-swiper.js.org/docs/next/changelogweekly0.5https://tiny-swiper.js.org/docs/weekly0.5https://tiny-swiper.js.org/docs/apiweekly0.5https://tiny-swiper.js.org/docs/changelogweekly0.5https://tiny-swiper.js.org/docs/demoweekly0.5 -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "npmClient": "yarn", 6 | "version": "independent", 7 | "command": { 8 | "publish": { 9 | "message": "Chore(release): publish" 10 | } 11 | }, 12 | "userWorkspaces": true 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tiny-swiper", 3 | "private": true, 4 | "devDependencies": { 5 | "commitizen": "^4.1.2", 6 | "husky": "^4.2.5", 7 | "lerna": "^3.20.2" 8 | }, 9 | "scripts": { 10 | "bootstrap": "lerna bootstrap", 11 | "release": "lerna publish --conventional-commits", 12 | "build": "lerna run lint && lerna run build", 13 | "lint": "lerna run lint", 14 | "test": "lerna run test", 15 | "report": "lerna run report" 16 | }, 17 | "husky": { 18 | "hooks": { 19 | "pre-commit": "npm run lint && npm run test", 20 | "prepare-commit-msg": "exec < /dev/tty && git-cz --hook || true" 21 | } 22 | }, 23 | "repository": "https://github.com/joe223/tiny-swiper.git" 24 | } 25 | -------------------------------------------------------------------------------- /packages/tiny-swiper/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", { 5 | "modules": false, 6 | "loose": true 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /packages/tiny-swiper/.eslintignore: -------------------------------------------------------------------------------- 1 | *.clz.ts 2 | /* 3 | 4 | !/src 5 | !/__test__ 6 | -------------------------------------------------------------------------------- /packages/tiny-swiper/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'parser': '@typescript-eslint/parser', 3 | 'plugins': [ 4 | '@typescript-eslint', 5 | 'import' 6 | ], 7 | 'env': { 8 | 'jest': true, 9 | 'browser': true, 10 | 'node': true, 11 | 'es6': true, 12 | 'mocha': true 13 | }, 14 | 'extends': [ 15 | 'eslint:recommended', 16 | 'plugin:@typescript-eslint/recommended' 17 | ], 18 | 'globals': { 19 | 'Atomics': 'readonly', 20 | 'SharedArrayBuffer': 'readonly', 21 | 'DocumentTouch': 'readonly' 22 | }, 23 | 'parserOptions': { 24 | 'ecmaVersion': 2018, 25 | 'sourceType': 'module' 26 | }, 27 | 'rules': { 28 | '@typescript-eslint/explicit-module-boundary-types': ['off'], 29 | '@typescript-eslint/consistent-type-assertions': ['off'], 30 | '@typescript-eslint/indent': [ 31 | 'error', 32 | 4 33 | ], 34 | '@typescript-eslint/no-unused-expressions': ['off'], 35 | '@typescript-eslint/no-non-null-assertion': ['off'], 36 | 'indent': 'off', 37 | 'linebreak-style': [ 38 | 'error', 39 | 'unix' 40 | ], 41 | 'quotes': [ 42 | 'error', 43 | 'single' 44 | ], 45 | '@typescript-eslint/member-delimiter-style': [ 46 | 'error', 47 | { 48 | 'multiline': { 49 | 'delimiter': 'none' 50 | } 51 | } 52 | ], 53 | '@typescript-eslint/ban-types': ['off'], 54 | // https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/semi.md 55 | 'semi': 'off', 56 | '@typescript-eslint/semi': ['error', 'never'], 57 | 'space-before-function-paren': 'off', 58 | '@typescript-eslint/space-before-function-paren': ['error'], 59 | 'comma-dangle': ['error', { 60 | 'arrays': 'never', 61 | 'objects': 'never', 62 | 'imports': 'never', 63 | 'exports': 'never', 64 | 'functions': 'never' 65 | }], 66 | 'prefer-arrow-callback': ['off'], 67 | 'func-names': ['off'], 68 | 'import/extensions': ['error', { 69 | 'js': 'never' 70 | }], 71 | 'import/no-cycle': ['off'], 72 | 'import/prefer-default-export': ['off'], 73 | 'max-len': ['error', { 74 | code: 140 75 | }], 76 | 'arrow-parens': ['off'], 77 | 'no-lonely-if': ['off'], 78 | 'no-plusplus': ['off'], 79 | 'no-unused-expressions': ['off'], 80 | 'no-mixed-operators': ['off'], 81 | 'no-nested-ternary': ['off'], 82 | 'no-restricted-properties': ['off'], 83 | 'no-param-reassign': ['off'] 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /packages/tiny-swiper/.npmignore: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | !/package.json 4 | !/README.md 5 | !/lib/**/* 6 | !/src/**/* 7 | !/types/**/* 8 | -------------------------------------------------------------------------------- /packages/tiny-swiper/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [2.1.2](https://github.com/joe223/tiny-swiper/compare/tiny-swiper@2.1.1...tiny-swiper@2.1.2) (2021-08-12) 7 | 8 | **Note:** Version bump only for package tiny-swiper 9 | 10 | 11 | 12 | 13 | 14 | ## [2.0.3](https://github.com/joe223/tiny-swiper/compare/tiny-swiper@2.0.2...tiny-swiper@2.0.3) (2021-02-02) 15 | 16 | **Note:** Version bump only for package tiny-swiper 17 | 18 | 19 | 20 | 21 | 22 | ## [2.0.2](https://github.com/joe223/tiny-swiper/compare/tiny-swiper@2.0.1...tiny-swiper@2.0.2) (2021-01-24) 23 | 24 | **Note:** Version bump only for package tiny-swiper 25 | 26 | 27 | 28 | 29 | 30 | ## [2.0.1](https://github.com/joe223/tiny-swiper/compare/tiny-swiper@2.0.0...tiny-swiper@2.0.1) (2021-01-17) 31 | 32 | **Note:** Version bump only for package tiny-swiper 33 | 34 | 35 | 36 | 37 | 38 | # v1.3.3 - Released on 2020/12/9 39 | 40 | - Fix: #36 SwiperPluginKeyboardControl exported incorrectly 41 | 42 | # v1.3.2 - Released on 2020/12/1 43 | 44 | - Fix: #29 Invert mousewheel. 45 | 46 | # v1.3.1 - Released on 2020/10/30 47 | 48 | - Fix: #27 Calculating the total of pagination bullet with slidesPerView. 49 | 50 | # v1.3.0 - Released on 2019/12/30 51 | 52 | - Add: `slidesPerView` parameter 53 | - Add: `centeredSlides` parameter 54 | - Add: SwiperPluginKeyboardControl 55 | - Fix: Unexpected slide width (#14) 56 | - Fix: transform boundary 57 | 58 | # v1.2.0 - Released on 2019/12/16 59 | 60 | - Add: export ESM and full-featured file 61 | 62 | # v1.1.0 - Released on 2019/12/9 63 | 64 | - Add: `SwiperPluginLazyload` plugin 65 | - Add: use method 66 | 67 | # v1.0.2 - Released on 2019/11/18 68 | 69 | - Add: excludeElements configuration 70 | - Changes: update resistance calculate 71 | - Changes: optimize package size 72 | 73 | # v1.0.1 - Released on 2019/11/12 74 | 75 | - Fix: SwiperPluginPagination plugin name 76 | 77 | # v1.0.0 - Released on 2019/11/11 78 | 79 | - **Breaking Change**: extract pagination plugin 80 | - Add: destory method 81 | - Add: life hooks 82 | 83 | # v0.1.0 - Released on 2019/10/28 84 | 85 | - Changes: pause scrolling on touch 86 | - Fix: click action stop scrolling while Swiper is scrolling 87 | 88 | # v0.0.6 - Released on 2019/10/17 89 | 90 | - Fix: `removeClassName` and `addClassName` 91 | 92 | # v0.0.5 - Released on 2019/10/17 93 | 94 | - Add Swiper parameter `touchAngle` 95 | - Add Swiper parameter `touchMoveStopPropagation` 96 | 97 | # v0.0.4 - Released on 2019/10/16 98 | 99 | - Add: simulate touch on desktop device 100 | 101 | # v0.0.3 - Released on 2019/10/16 102 | 103 | - Add: `intermittent` parameter 104 | - Add: `pagination.clickable` configuration 105 | - Add: demo site https://js.org/tiny-swiper 106 | - Changes: default timing function 107 | 108 | # v0.0.2 - Released on 2019/10/15 109 | 110 | - Add Swiper parameters `longSwipesMs` 111 | - Add Swiper parameters `touchRatio` 112 | - Add Swiper parameters `passiveListeners` 113 | - Add Swiper parameters `resistance` 114 | - Add Swiper parameters `resistanceRatio` 115 | -------------------------------------------------------------------------------- /packages/tiny-swiper/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-present, joe223 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 | -------------------------------------------------------------------------------- /packages/tiny-swiper/LOGO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe223/tiny-swiper/aca4f989fa75ec9907b99fcbbfcd10cf99893339/packages/tiny-swiper/LOGO.png -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/common.ts: -------------------------------------------------------------------------------- 1 | import Swiper, { SwiperPlugin } from '../src/core/index' 2 | import { UserOptions } from '../src/core/options' 3 | 4 | export const defaultStyle = ` 5 | ` 29 | const defaultTpl = ` 30 | 31 |
32 | 33 |
34 | 35 |
1
36 |
2
37 |
3
38 |
4
39 |
40 | 41 |
42 |
43 | ` 44 | 45 | export function testPluginLifcycle ( 46 | tpl: string, 47 | opt: UserOptions, 48 | plugin: SwiperPlugin, 49 | pluginName: string 50 | ) { 51 | document.body.innerHTML = `${tpl}` 52 | 53 | const fn = jest.fn(((...p) => plugin(...p))) 54 | const $el = document.body.querySelector('div') 55 | const swiperInstance = Swiper($el, { 56 | ...opt, 57 | plugins: [fn] 58 | }) 59 | 60 | swiperInstance.slideTo(swiperInstance.state.index + 1) 61 | swiperInstance.updateSize() 62 | swiperInstance.update() 63 | swiperInstance.destroy() 64 | 65 | test(`Plugin ${pluginName} mounted`, () => { 66 | expect(fn).toBeCalledTimes(1) 67 | }) 68 | } 69 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/smoke/instance.spec.ts: -------------------------------------------------------------------------------- 1 | import { createElementsInstance } from '../utils' 2 | import Swiper from '../../src/core/index' 3 | import { LIFE_CYCLES } from '../../src/core/eventHub' 4 | 5 | describe('lifecycle', () => { 6 | const elementsInstance = createElementsInstance(3, { 7 | width: 300, 8 | height: 300 9 | }) 10 | const swiperInstance = new Swiper(elementsInstance.$el) 11 | const events: { 12 | [key: string]: Function 13 | } = {} 14 | const lifecyclesList = Object.values(LIFE_CYCLES) 15 | 16 | lifecyclesList.forEach(eventName => { 17 | // const fn = jest.fn(p => console.log(eventName, p)) 18 | const fn = jest.fn() 19 | 20 | events[eventName] = fn 21 | swiperInstance.on(eventName, fn) 22 | }) 23 | 24 | swiperInstance.slideTo(swiperInstance.state.index + 1) 25 | swiperInstance.updateSize() 26 | swiperInstance.update() 27 | swiperInstance.destroy() 28 | 29 | test(LIFE_CYCLES.BEFORE_SLIDE, () => { 30 | expect(events[LIFE_CYCLES.BEFORE_SLIDE]).toBeCalledTimes(3) 31 | }) 32 | }) 33 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/smoke/modules/autoPlay.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | defaultStyle, 3 | testPluginLifcycle 4 | } from '../../common' 5 | import SwiperPluginAutoPlay from '../../../src/modules/autoPlay' 6 | 7 | describe('Plugin - AutoPlay', () => { 8 | testPluginLifcycle( 9 | ` 10 | ${defaultStyle} 11 |
12 |
13 | 14 |
1
15 |
2
16 |
3
17 |
4
18 |
19 |
20 | `, 21 | { 22 | autoplay: { 23 | delay: 1000 24 | } 25 | }, 26 | SwiperPluginAutoPlay, 27 | 'SwiperPluginAutoPlay') 28 | }) 29 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/smoke/modules/keyboardControl.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | defaultStyle, 3 | testPluginLifcycle 4 | } from '../../common' 5 | import SwiperPluginKeyboardControl from '../../../src/modules/keyboardControl' 6 | 7 | describe('Plugin - SwiperPluginKeyboardControl', () => { 8 | testPluginLifcycle( 9 | ` 10 | ${defaultStyle} 11 |
12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
18 |
19 | `, 20 | { 21 | keyboard: { 22 | enabled: true 23 | } 24 | }, 25 | SwiperPluginKeyboardControl, 26 | 'SwiperPluginKeyboardControl') 27 | }) 28 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/smoke/modules/lazyload.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | defaultStyle, 3 | testPluginLifcycle 4 | } from '../../common' 5 | import SwiperPluginLazyload from '../../../src/modules/lazyload' 6 | 7 | describe('Plugin - SwiperPluginLazyload', () => { 8 | testPluginLifcycle( 9 | ` 10 | ${defaultStyle} 11 |
12 |
13 |
14 | 16 |
17 |
18 |
19 | 21 |
22 |
23 |
24 | 26 |
27 |
28 |
29 | 31 |
32 |
33 |
34 |
35 | `, 36 | { 37 | lazyload: { 38 | loadPrevNext: false, 39 | loadPrevNextAmount: 1, 40 | loadOnTransitionStart: true, 41 | elementClass: 'swiper-lazy', 42 | loadingClass: 'swiper-lazy-loading', 43 | loadedClass: 'swiper-lazy-loaded', 44 | preloaderClass: 'swiper-lazy-preloader' 45 | } 46 | }, 47 | SwiperPluginLazyload, 48 | 'SwiperPluginLazyload') 49 | }) 50 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/smoke/modules/mousewheel.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | defaultStyle, 3 | testPluginLifcycle 4 | } from '../../common' 5 | import SwiperPluginMousewheel from '../../../src/modules/mousewheel' 6 | 7 | describe('Plugin - SwiperPluginMousewheel', () => { 8 | testPluginLifcycle( 9 | ` 10 | ${defaultStyle} 11 |
12 |
13 |
1
14 |
2
15 |
3
16 |
4
> 17 |
18 |
19 | `, 20 | { 21 | mousewheel: { 22 | invert: true 23 | } 24 | }, 25 | SwiperPluginMousewheel, 26 | 'SwiperPluginMousewheel') 27 | }) 28 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/smoke/modules/navigation.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | defaultStyle, 3 | testPluginLifcycle 4 | } from '../../common' 5 | import SwiperPluginNavigation from '../../../src/modules/navigation' 6 | 7 | describe('Plugin - Navigation', () => { 8 | testPluginLifcycle( 9 | ` 10 | ${defaultStyle} 11 |
12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
18 | 19 | 20 |
21 | `, 22 | { 23 | navigation: { 24 | nextEl: '.swiper-plugin-navigation-nextEl', 25 | prevEl: '.swiper-plugin-navigation-prevEl' 26 | } 27 | }, 28 | SwiperPluginNavigation, 29 | 'SwiperPluginNavigation') 30 | }) 31 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/smoke/modules/pagination.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | defaultStyle, 3 | testPluginLifcycle 4 | } from '../../common' 5 | import SwiperPluginPagination from '../../../src/modules/pagination' 6 | 7 | describe('Plugin - Pagination', () => { 8 | testPluginLifcycle( 9 | ` 10 | ${defaultStyle} 11 |
12 |
13 | 14 |
1
15 |
2
16 |
3
17 |
4
18 |
19 |
20 |
21 | `, 22 | { 23 | pagination: { 24 | el: '.swiper-pagination' 25 | } 26 | }, 27 | SwiperPluginPagination, 28 | 'SwiperPluginPagination') 29 | }) 30 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/unit/animation.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Tick 3 | } from '../../src/core/render/nextTick' 4 | import { 5 | Animation 6 | } from '../../src/core/render/animation' 7 | 8 | describe('Tick', () => { 9 | test('init', () => { 10 | const tick = Tick() 11 | 12 | expect(tick).toHaveProperty('run') 13 | expect(tick).toHaveProperty('stop') 14 | }) 15 | 16 | test('run', done => { 17 | const tick = Tick() 18 | const mockCallback = jest.fn() 19 | 20 | tick.run(mockCallback) 21 | 22 | setTimeout(() => { 23 | expect(mockCallback).toBeCalledTimes(1) 24 | done() 25 | }, 100) 26 | }) 27 | 28 | test('cancel', done => { 29 | const tick = Tick() 30 | const mockCallback = jest.fn() 31 | 32 | tick.run(mockCallback) 33 | tick.stop() 34 | 35 | setTimeout(() => { 36 | expect(mockCallback).toBeCalledTimes(0) 37 | done() 38 | }, 100) 39 | }) 40 | }) 41 | 42 | describe('Animation', () => { 43 | test('init', () => { 44 | const animation = Animation() 45 | 46 | expect(animation).toHaveProperty('run') 47 | expect(animation).toHaveProperty('stop') 48 | }) 49 | 50 | test('run', done => { 51 | let calledTimes = 0 52 | const animation = Animation() 53 | const mockCallback = jest.fn(e => calledTimes++) 54 | 55 | animation.run(mockCallback) 56 | expect(mockCallback).toBeCalledTimes(0) 57 | 58 | setTimeout(() => { 59 | animation.stop() 60 | expect(calledTimes > 1).toBeTruthy() 61 | done() 62 | }, 100) 63 | }) 64 | 65 | test('cancel', done => { 66 | const animation = Animation() 67 | const mockCallback = jest.fn() 68 | 69 | animation.run(mockCallback) 70 | animation.stop() 71 | 72 | setTimeout(() => { 73 | expect(mockCallback).toBeCalledTimes(0) 74 | done() 75 | }, 100) 76 | }) 77 | }) 78 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/unit/eventHub.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | EventHub 3 | } from '../../src/core/eventHub' 4 | 5 | describe('EventHub', () => { 6 | test('Emit event', () => { 7 | const callback1 = jest.fn() 8 | const callback2 = jest.fn() 9 | const eventHub = EventHub() 10 | 11 | eventHub.on('event', callback1) 12 | eventHub.on('event', callback2) 13 | eventHub.emit('event') 14 | 15 | expect(callback1).toBeCalledTimes(1) 16 | expect(callback2).toBeCalledTimes(1) 17 | }) 18 | 19 | test('Unsubscribe event', () => { 20 | const callback1 = jest.fn() 21 | const eventHub = EventHub() 22 | 23 | eventHub.on('event', callback1) 24 | eventHub.off('event', callback1) 25 | eventHub.emit('event') 26 | 27 | expect(callback1).toBeCalledTimes(0) 28 | }) 29 | 30 | test('Irrelevant event callback won\'t be triggered', () => { 31 | const callback1 = jest.fn() 32 | const callback2 = jest.fn() 33 | const eventHub = EventHub() 34 | 35 | eventHub.on('event1', callback1) 36 | eventHub.on('event2', callback2) 37 | eventHub.emit('event1') 38 | 39 | expect(callback1).toBeCalledTimes(1) 40 | expect(callback2).toBeCalledTimes(0) 41 | }) 42 | 43 | test('Clear all event subscription', () => { 44 | const callback1 = jest.fn() 45 | const callback2 = jest.fn() 46 | const eventHub = EventHub() 47 | 48 | eventHub.on('event1', callback1) 49 | eventHub.on('event2', callback2) 50 | eventHub.clear() 51 | eventHub.emit('event1') 52 | eventHub.emit('event2') 53 | 54 | expect(callback1).toBeCalledTimes(0) 55 | expect(callback2).toBeCalledTimes(0) 56 | }) 57 | }) 58 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/unit/sensor.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Sensor 3 | } from '../../src/core/sensor/index' 4 | import { createOperationsInstance } from '../utils' 5 | 6 | describe('Sensor', () => { 7 | test('init', () => { 8 | const { 9 | env, 10 | state, 11 | options, 12 | operations 13 | } = createOperationsInstance() 14 | const sensor = Sensor( 15 | env, 16 | state, 17 | options, 18 | operations 19 | ) 20 | 21 | expect(sensor).toHaveProperty('attach') 22 | expect(sensor).toHaveProperty('detach') 23 | }) 24 | 25 | test('attach and detach - touchable equal true', () => { 26 | // eslint-disable-next-line @typescript-eslint/no-empty-function 27 | window.ontouchstart = (): void => {} 28 | 29 | const { 30 | env, 31 | state, 32 | options, 33 | operations 34 | } = createOperationsInstance() 35 | const sensor = Sensor( 36 | env, 37 | state, 38 | options, 39 | operations 40 | ) 41 | const { 42 | $el 43 | } = env.element 44 | const addEvents: string[] = [] 45 | const removeEvents: string[] = [] 46 | 47 | $el.addEventListener = jest.fn(eventName => addEvents.push(eventName)) 48 | $el.removeEventListener = jest.fn(eventName => removeEvents.push(eventName)) 49 | 50 | sensor.attach() 51 | expect(addEvents).toEqual([ 52 | 'touchstart', 53 | 'touchmove', 54 | 'touchend', 55 | 'touchcancel' 56 | ]) 57 | 58 | sensor.detach() 59 | expect(removeEvents).toEqual([ 60 | 'touchstart', 61 | 'touchmove', 62 | 'touchend', 63 | 'touchcancel', 64 | 'mousedown' 65 | ]) 66 | 67 | delete window.ontouchstart 68 | }) 69 | 70 | test('attach and detach - touchable equal false', () => { 71 | const { 72 | env, 73 | state, 74 | options, 75 | operations 76 | } = createOperationsInstance() 77 | const sensor = Sensor( 78 | env, 79 | state, 80 | options, 81 | operations 82 | ) 83 | const { 84 | $el 85 | } = env.element 86 | const addDocumentEvents: string[] = [] 87 | const addContainerEvents: string[] = [] 88 | const removeDocumentEvents: string[] = [] 89 | 90 | document.addEventListener = jest.fn(eventName => addDocumentEvents.push(eventName)) 91 | document.removeEventListener = jest.fn(eventName => removeDocumentEvents.push(eventName)) 92 | $el.addEventListener = jest.fn(eventName => addContainerEvents.push(eventName)) 93 | 94 | env.touchable = false 95 | 96 | sensor.attach() 97 | expect(addContainerEvents).toEqual([ 98 | 'mousedown' 99 | ]) 100 | expect(addDocumentEvents).toEqual([ 101 | 'mousemove', 102 | 'mouseup' 103 | ]) 104 | 105 | sensor.detach() 106 | expect(removeDocumentEvents).toEqual([ 107 | 'mousemove', 108 | 'mouseup' 109 | ]) 110 | }) 111 | }) 112 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/unit/state.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | State 3 | } from '../../src/core/state/index' 4 | import { 5 | Tracker 6 | } from '../../src/core/state/trace' 7 | 8 | describe('Tracker', () => { 9 | test('init', () => { 10 | const tracker = Tracker() 11 | 12 | expect(tracker).toHaveProperty('getDuration') 13 | expect(tracker).toHaveProperty('getOffset') 14 | expect(tracker).toHaveProperty('getLogs') 15 | expect(tracker).toHaveProperty('vector') 16 | expect(tracker).toHaveProperty('clear') 17 | expect(tracker).toHaveProperty('push') 18 | }) 19 | }) 20 | 21 | describe('State', () => { 22 | test('init', () => { 23 | const state = State() 24 | 25 | expect(state).toHaveProperty('index', 0) 26 | expect(state).toHaveProperty('startTransform', 0) 27 | expect(state).toHaveProperty('isStart', false) 28 | expect(state).toHaveProperty('isScrolling', false) 29 | expect(state).toHaveProperty('isTouching', false) 30 | expect(state).toHaveProperty('transforms', 0) 31 | expect(state).toHaveProperty('progress', 0) 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/unit/timing.spec.ts: -------------------------------------------------------------------------------- 1 | import { debounce } from '../../src/core/render/timing' 2 | import {wait} from '../utils' 3 | 4 | describe('Timing', () => { 5 | it('debounce', async () => { 6 | const cb = jest.fn() 7 | const fn = debounce(cb, 200, { 8 | trailing: false 9 | }) 10 | 11 | fn() 12 | fn() 13 | 14 | await wait(200) 15 | 16 | fn() 17 | 18 | expect(cb.mock.calls.length).toEqual(2) 19 | }) 20 | 21 | it('trailing debounce', async () => { 22 | const cb = jest.fn() 23 | const fn = debounce(cb, 200, { 24 | trailing: true 25 | }) 26 | 27 | fn() 28 | fn() 29 | 30 | await wait(200) 31 | 32 | fn() 33 | 34 | expect(cb.mock.calls.length).toEqual(3) 35 | }) 36 | }) 37 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/unit/trace.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Tracker, 3 | Position 4 | } from '../../src/core/state/trace' 5 | 6 | function createTrackerInstance (): Tracker { 7 | const tracker = Tracker() 8 | 9 | tracker.push({ 10 | x: 0, 11 | y: 0, 12 | time: 0 13 | } as Position) 14 | tracker.push({ 15 | x: 1, 16 | y: 1, 17 | time: 5 18 | } as Position) 19 | tracker.push({ 20 | x: 3, 21 | y: 4, 22 | time: 10 23 | } as Position) 24 | 25 | return tracker 26 | } 27 | 28 | describe('Trace', () => { 29 | test('init', () => { 30 | const tracker = createTrackerInstance() 31 | 32 | expect(tracker.getDuration()).toEqual(10) 33 | expect(tracker.getOffset()).toEqual({ 34 | x: 3, 35 | y: 4 36 | }) 37 | expect(tracker.vector()).toEqual({ 38 | x: 2, 39 | y: 3, 40 | velocityX: 0.4, 41 | velocityY: 0.6, 42 | angle: Math.atan2(3, 2) * 180 / Math.PI 43 | }) 44 | }) 45 | 46 | test('clear', () => { 47 | const tracker = createTrackerInstance() 48 | 49 | expect(tracker.getLogs()).toEqual([ 50 | { 51 | x: 0, 52 | y: 0, 53 | time: 0 54 | }, 55 | { 56 | x: 1, 57 | y: 1, 58 | time: 5 59 | }, 60 | { 61 | x: 3, 62 | y: 4, 63 | time: 10 64 | } 65 | ]) 66 | tracker.clear() 67 | expect(tracker.getLogs()).toEqual([]) 68 | }) 69 | 70 | test('click action (only one log data)', () => { 71 | const tracker = Tracker() 72 | 73 | tracker.push({ 74 | x: 0, 75 | y: 0, 76 | time: 0 77 | } as Position) 78 | 79 | expect(tracker.getDuration()).toEqual(0) 80 | expect(tracker.getOffset()).toEqual({ 81 | x: 0, 82 | y: 0 83 | }) 84 | expect(tracker.vector()).toEqual({ 85 | x: 0, 86 | y: 0, 87 | velocityX: 0, 88 | velocityY: 0, 89 | angle: 0 90 | }) 91 | }) 92 | }) 93 | -------------------------------------------------------------------------------- /packages/tiny-swiper/__test__/utils.ts: -------------------------------------------------------------------------------- 1 | import { optionFormatter, UserOptions } from '../src/core/options' 2 | import { EventHub } from '../src/core/eventHub' 3 | import { Env } from '../src/core/env/index' 4 | import { State } from '../src/core/state/index' 5 | import { Renderer } from '../src/core/render/index' 6 | import { Operations } from '../src/core/state/operations' 7 | 8 | Object.defineProperties(window.HTMLElement.prototype, { 9 | offsetLeft: { 10 | get () { return parseFloat(window.getComputedStyle(this).marginLeft) || 0 } 11 | }, 12 | offsetTop: { 13 | get () { return parseFloat(window.getComputedStyle(this).marginTop) || 0 } 14 | }, 15 | offsetHeight: { 16 | get () { return parseFloat(window.getComputedStyle(this).height) || 0 } 17 | }, 18 | offsetWidth: { 19 | get () { return parseFloat(window.getComputedStyle(this).width) || 0 } 20 | } 21 | }) 22 | 23 | type mockElementParams = { 24 | width?: number 25 | height?: number 26 | classList?: string[] 27 | } 28 | 29 | export function wait (time: number) { 30 | return new Promise(resolve => { 31 | setTimeout(resolve, time) 32 | }) 33 | } 34 | 35 | export function mockElement ({ 36 | width = 100, 37 | height = 100, 38 | classList = [] 39 | }: mockElementParams) { 40 | const el = document.createElement('div') 41 | 42 | el.style.width = `${width}px` 43 | el.style.height = `${height}px` 44 | el.classList.add(...classList) 45 | 46 | return el 47 | } 48 | 49 | export function createElementsInstance ( 50 | listLength = 3, 51 | boundary = { 52 | width: 300, 53 | height: 300 54 | } 55 | ) { 56 | const $body = document.getElementsByTagName('body')[0] 57 | const $list = new Array(listLength) 58 | .fill(null) 59 | .map(() => mockElement({ 60 | ...boundary, 61 | classList: [optionFormatter().slideClass] 62 | })) 63 | const $el = mockElement({ 64 | ...boundary 65 | }) 66 | const $wrapper = mockElement({ 67 | classList: [optionFormatter().wrapperClass] 68 | }) 69 | 70 | $wrapper.append(...$list) 71 | $el.appendChild($wrapper) 72 | $body.appendChild($el) 73 | 74 | return { 75 | $el, 76 | $wrapper, 77 | $list 78 | } 79 | } 80 | 81 | export function createOperationsInstance ( 82 | userOptions: UserOptions = {}, 83 | listLength = 3, 84 | elementsOptions?: { width: number; height: number } | undefined 85 | ) { 86 | const element = createElementsInstance( 87 | listLength, 88 | elementsOptions 89 | ) 90 | const options = optionFormatter(userOptions) 91 | const eventHub = EventHub() 92 | const env = Env(element, options) 93 | const state = State() 94 | const renderer = Renderer( 95 | env, 96 | options 97 | ) 98 | const operations = Operations( 99 | env, 100 | state, 101 | options, 102 | renderer, 103 | eventHub 104 | ) 105 | 106 | return { 107 | env, 108 | state, 109 | options, 110 | renderer, 111 | eventHub, 112 | operations 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/autoPlay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
60 | 61 |
62 | 63 |
1
64 |
2
65 |
3
66 |
4
67 |
68 | 69 |
70 |
71 | 72 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 |
61 | 62 |
1
63 |
2
64 |
3
65 |
4
66 |
67 | 68 |
69 |
70 | 71 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/freeMode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 |
61 | 62 |
1
63 |
2
64 |
3
65 |
4
66 |
67 | 68 |
69 |
70 | 71 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/keyboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 |
61 | 62 |
1
63 |
2
64 |
3
65 |
4
66 |
67 | 68 |
69 |
70 | 71 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/loop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 |
61 | 62 |
1
63 |
2
64 |
3
65 |
4
66 |
67 | 68 |
69 |
70 | 71 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/mousewheel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 |
61 | 62 |
1
63 |
2
64 |
3
65 |
4
66 |
67 | 68 |
69 |
70 | 71 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
85 | 86 |
87 | 88 |
1
89 |
2
90 |
3
91 |
4
92 |
93 | 94 |
95 | 96 | 97 |
98 | 99 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/resize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 |
61 | 62 |
1
63 |
2
64 |
3
65 |
4
66 |
67 | 68 |
69 |
70 | 71 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/scrollEvent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 |
60 | 61 |
1
62 |
2
63 |
3
64 |
4
65 |
5
66 |
6
67 |
68 | 69 |
70 |
71 | 72 | 85 | 86 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/slidesPerView.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo 8 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 |
60 | 61 |
1
62 |
2
63 |
3
64 |
4
65 |
5
66 |
6
67 |
68 | 69 |
70 |
71 | 72 | 83 | 84 | -------------------------------------------------------------------------------- /packages/tiny-swiper/demo/vertical.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Demo 9 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 | 80 |
81 | 82 |
83 | 85 |
86 |
87 | 89 |
90 |
91 | 93 |
94 |
95 | 97 |
98 |
99 | 101 |
102 |
103 | 104 |
105 |
106 | 107 |
108 | some text here 109 |
110 | 111 | 116 | 117 | -------------------------------------------------------------------------------- /packages/tiny-swiper/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | roots: [ 5 | './__test__/unit', 6 | './__test__/smoke' 7 | ], 8 | collectCoverage: true, 9 | coverageDirectory: './coverage' 10 | } 11 | -------------------------------------------------------------------------------- /packages/tiny-swiper/lib/modules/autoPlay.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).SwiperPluginAutoPlay=t()}(this,function(){"use strict";function c(e,t,n,i){e.addEventListener(t,n,i)}function r(e,t,n){e.removeEventListener(t,n)}var l="after-init",m="before-slide",f="after-slide",p="after-destroy";return function(i,e){var o,t,n,u;function a(){var t=i.state,n=i.env;o.stopOnLastSlide&&t.index>=n.limitation.maxIndex||u.pause||u.timeoutId||(u.timeoutId=setTimeout(function(){var e=o.reverseDirection?t.index-1:t.index+1,e=e>n.limitation.maxIndex?n.limitation.minIndex:e= 0 && boundary.bottom <= window.innerHeight && boundary.left >= 0 && boundary.right <= window.innerWidth; 33 | return isInView && visibility; 34 | } 35 | /** 36 | * TinySwiper plugin for keyboard control. 37 | * 38 | * @param {SwiperInstance} instance 39 | * @param {Options} 40 | */ 41 | 42 | 43 | var SwiperPluginKeyboardControl = (function SwiperPluginKeyboardControl(instance, options) { 44 | var isEnable = Boolean(options.keyboard); 45 | var keyboardOptions = Object.assign({ 46 | enabled: true, 47 | onlyInViewport: true 48 | }, options.keyboard); 49 | var keyboard = { 50 | enable: function enable() { 51 | keyboardOptions.enabled = true; 52 | }, 53 | disable: function disable() { 54 | keyboardOptions.enabled = false; 55 | }, 56 | onKeyDown: function onKeyDown(e) { 57 | var key = e.key; 58 | if (keyboardOptions.onlyInViewport && !isElementInView(instance.env.element.$el) || !keyboardOptions.enabled) return; 59 | 60 | if (options.isHorizontal) { 61 | if (key === DIRECTION.left) { 62 | instance.slideTo(instance.state.index - 1); 63 | } else if (key === DIRECTION.right) { 64 | instance.slideTo(instance.state.index + 1); 65 | } 66 | } else { 67 | if (key === DIRECTION.down) { 68 | instance.slideTo(instance.state.index - 1); 69 | } else if (key === DIRECTION.up) { 70 | instance.slideTo(instance.state.index + 1); 71 | } 72 | } 73 | } 74 | }; 75 | if (!isEnable) return; 76 | instance.on('before-init', function () { 77 | instance.keyboard = keyboard; 78 | attachListener(window, 'keydown', keyboard.onKeyDown); 79 | }); 80 | instance.on('after-destroy', function () { 81 | if (instance.keyboard) { 82 | detachListener(window, 'keydown', keyboard.onKeyDown); 83 | delete instance.keyboard; 84 | } 85 | }); 86 | }); 87 | 88 | return SwiperPluginKeyboardControl; 89 | 90 | }))); 91 | //# sourceMappingURL=keyboardControl.js.map 92 | -------------------------------------------------------------------------------- /packages/tiny-swiper/lib/modules/keyboardControl.min.js: -------------------------------------------------------------------------------- 1 | !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).SwiperPluginKeyboardControl=n()}(this,function(){"use strict";var t="ArrowUp",d="ArrowRight",a="ArrowDown",l="ArrowLeft";function f(e){var n=function e(n){if(!n)return!1;var o=getComputedStyle(n);return"hidden"!==o.visibility&&"none"!==o.display&&(!n.parentElement||1!==n.parentElement.nodeType||e(n.parentElement))}(e),e=e.getBoundingClientRect();return 0<=e.top&&e.bottom<=window.innerHeight&&0<=e.left&&e.right<=window.innerWidth&&n}return function(i,n){var e=Boolean(n.keyboard),o=Object.assign({enabled:!0,onlyInViewport:!0},n.keyboard),r={enable:function(){o.enabled=!0},disable:function(){o.enabled=!1},onKeyDown:function(e){e=e.key;o.onlyInViewport&&!f(i.env.element.$el)||!o.enabled||(n.isHorizontal?e===l?i.slideTo(i.state.index-1):e===d&&i.slideTo(i.state.index+1):e===a?i.slideTo(i.state.index-1):e===t&&i.slideTo(i.state.index+1))}};e&&(i.on("before-init",function(){var e,n,o,t;i.keyboard=r,e=window,n="keydown",o=r.onKeyDown,e.addEventListener(n,o,t)}),i.on("after-destroy",function(){var e,n,o;i.keyboard&&(e=window,n="keydown",o=r.onKeyDown,e.removeEventListener(n,o),delete i.keyboard)}))}}); 2 | -------------------------------------------------------------------------------- /packages/tiny-swiper/lib/modules/lazyload.min.js: -------------------------------------------------------------------------------- 1 | !function(e,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a():"function"==typeof define&&define.amd?define(a):(e="undefined"!=typeof globalThis?globalThis:e||self).SwiperPluginLazyload=a()}(this,function(){"use strict";function r(a,e){void 0===e&&(e=[]),Array.isArray(e)||(e=[e]),e.forEach(function(e){return!a.classList.contains(e)&&a.classList.add(e)})}function s(a,e){void 0===e&&(e=[]),Array.isArray(e)||(e=[e]),e.forEach(function(e){return a.classList.contains(e)&&a.classList.remove(e)})}return function(l,e){var a=Boolean(e.lazyload),t=Object.assign({loadPrevNext:!1,loadPrevNextAmount:1,loadOnTransitionStart:!1,elementClass:"swiper-lazy",loadingClass:"swiper-lazy-loading",loadedClass:"swiper-lazy-loaded",preloaderClass:"swiper-lazy-preloader"},e.lazyload),n={load:function(e){var a,o,e=l.env.element.$list[e];function n(e){e.removeAttribute("data-src"),r(e,[t.loadedClass]),s(e,[t.loadingClass]),e.onload=null,e.onerror=null,e.isLoaded=!0,a.every(function(e){return e.isLoaded})&&o.forEach(function(e){e.parentElement.removeChild(e)})}e&&(a=[].slice.call(e.getElementsByClassName(t.elementClass)),o=[].slice.call(e.getElementsByClassName(t.preloaderClass)),a.forEach(function(e){var a;e.hasAttribute("data-src")&&(a=e.getAttribute("data-src"),r(e,[t.loadingClass]),s(e,[t.loadedClass]),e.src=a,e.onload=function(){return n(e)},e.onerror=function(){return n(e)})}))},loadRange:function(e,a){if(n.load(e),t.loadPrevNext&&1<=a)for(var o=1;o<=a;o++)n.load(e+o),n.load(e-o)}};a&&(l.on("before-init",function(){l.lazyload=n}),t.loadOnTransitionStart?l.on("before-slide",function(e,a,o){n.loadRange(o,t.loadPrevNextAmount)}):l.on("after-slide",function(e){n.loadRange(e,t.loadPrevNextAmount)}),l.on("after-destroy",function(){l.lazyload&&delete l.lazyload}))}}); 2 | -------------------------------------------------------------------------------- /packages/tiny-swiper/lib/modules/mousewheel.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.SwiperPluginMousewheel = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | function attachListener(el, evtName, handler, opts) { 8 | el.addEventListener(evtName, handler, opts); 9 | } 10 | function detachListener(el, evtName, handler) { 11 | el.removeEventListener(evtName, handler); 12 | } 13 | 14 | var SwiperPluginMousewheel = (function SwiperPluginMousewheel(instance, options) { 15 | var isEnable = Boolean(options.mousewheel); 16 | var mousewheelOptions = Object.assign({ 17 | invert: false, 18 | sensitivity: 1, 19 | interval: 400 20 | }, options.mousewheel); 21 | var mousewheelInstance = { 22 | $el: null 23 | }; 24 | var wheelStatus = { 25 | wheeling: false, 26 | wheelDelta: 0, 27 | wheelingTimer: 0 28 | }; 29 | 30 | var handler = function handler(e) { 31 | var isHorizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY); 32 | if (options.isHorizontal !== isHorizontal) return; 33 | var delta = isHorizontal ? e.deltaX : e.deltaY; 34 | var index = instance.state.index; 35 | 36 | if (Math.abs(delta) - Math.abs(wheelStatus.wheelDelta) > 0 && !wheelStatus.wheeling && Math.abs(delta) >= mousewheelOptions.sensitivity) { 37 | var step = mousewheelOptions.invert ? 1 : -1; 38 | instance.slideTo(delta > 0 ? index - step : index + step); 39 | wheelStatus.wheeling = true; 40 | wheelStatus.wheelingTimer = setTimeout(function () { 41 | wheelStatus.wheeling = false; 42 | }, mousewheelOptions.interval); 43 | } 44 | 45 | wheelStatus.wheelDelta = delta; 46 | e.preventDefault(); 47 | e.stopPropagation(); 48 | }; 49 | 50 | instance.on('after-init', function () { 51 | if (!isEnable) return; 52 | var element = instance.env.element; 53 | var $el = element.$el; 54 | mousewheelInstance.$el = $el; 55 | attachListener($el, 'wheel', handler); 56 | }); 57 | instance.on('after-destroy', function () { 58 | if (!isEnable) return; 59 | detachListener(mousewheelInstance.$el, 'wheel', handler); 60 | delete mousewheelInstance.$el; 61 | }); 62 | }); 63 | 64 | return SwiperPluginMousewheel; 65 | 66 | }))); 67 | //# sourceMappingURL=mousewheel.js.map 68 | -------------------------------------------------------------------------------- /packages/tiny-swiper/lib/modules/mousewheel.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).SwiperPluginMousewheel=t()}(this,function(){"use strict";return function(l,a){function o(e){var t,n,i=Math.abs(e.deltaX)>Math.abs(e.deltaY);a.isHorizontal===i&&(t=i?e.deltaX:e.deltaY,n=l.state.index,0=r.sensitivity&&(i=r.invert?1:-1,l.slideTo(0= 7", 53 | "IOS >= 11", 54 | "Safari >= 11", 55 | "Chrome >= 49", 56 | "Firefox >= 31", 57 | "Samsung >= 5" 58 | ], 59 | "keywords": [ 60 | "swiper", 61 | "swipe", 62 | "slider", 63 | "touch", 64 | "ios", 65 | "mobile", 66 | "tiny-swiper", 67 | "tinyswiper", 68 | "carousel", 69 | "gallery", 70 | "plugin" 71 | ], 72 | "nyc": { 73 | "report-dir": "./coverage", 74 | "reporter": [ 75 | "lcov", 76 | "text-summary" 77 | ], 78 | "include": [ 79 | "**/*.js" 80 | ], 81 | "exclude": [ 82 | "__test__", 83 | "node_modules", 84 | "src/index.esm.js", 85 | "src/index.full.js" 86 | ], 87 | "watermarks": { 88 | "lines": [ 89 | 70, 90 | 85 91 | ], 92 | "functions": [ 93 | 70, 94 | 85 95 | ], 96 | "branches": [ 97 | 70, 98 | 85 99 | ], 100 | "statements": [ 101 | 70, 102 | 85 103 | ] 104 | } 105 | }, 106 | "husky": { 107 | "hooks": { 108 | "pre-commit": "npm run lint && npm run test" 109 | } 110 | }, 111 | "dependencies": { 112 | "typescript": "^4.1.3" 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /packages/tiny-swiper/rollup.config.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import { babel } from '@rollup/plugin-babel' 3 | import serve from 'rollup-plugin-serve' 4 | import { uglify } from 'rollup-plugin-uglify' 5 | import eslint from '@rollup/plugin-eslint' 6 | import typescript from '@rollup/plugin-typescript' 7 | 8 | const isBuildProd = process.env.NODE_ENV === 'production' 9 | 10 | const entries = [ 11 | { 12 | input: 'index.ts', 13 | compress: isBuildProd, 14 | serve: true, 15 | options: { 16 | name: 'Swiper' 17 | } 18 | }, 19 | { 20 | input: 'index.full.ts', 21 | compress: isBuildProd, 22 | options: { 23 | name: 'Swiper', 24 | entryFileNames: '[name].js' 25 | } 26 | }, 27 | { 28 | input: 'index.esm.ts', 29 | compress: false, 30 | options: { 31 | name: 'Swiper', 32 | format: 'es', 33 | entryFileNames: '[name].js' 34 | } 35 | }, 36 | { 37 | input: 'modules/pagination.ts', 38 | compress: isBuildProd, 39 | options: { 40 | name: 'SwiperPluginPagination' 41 | } 42 | }, 43 | { 44 | input: 'modules/navigation.ts', 45 | compress: isBuildProd, 46 | options: { 47 | name: 'SwiperPluginNavigation' 48 | } 49 | }, 50 | { 51 | input: 'modules/lazyload.ts', 52 | compress: isBuildProd, 53 | options: { 54 | name: 'SwiperPluginLazyload' 55 | } 56 | }, 57 | { 58 | input: 'modules/keyboardControl.ts', 59 | compress: isBuildProd, 60 | options: { 61 | name: 'SwiperPluginKeyboardControl' 62 | } 63 | }, 64 | { 65 | input: 'modules/mousewheel.ts', 66 | compress: isBuildProd, 67 | options: { 68 | name: 'SwiperPluginMousewheel' 69 | } 70 | }, 71 | { 72 | input: 'modules/autoPlay.ts', 73 | compress: isBuildProd, 74 | options: { 75 | name: 'SwiperPluginAutoPlay' 76 | } 77 | }, 78 | { 79 | input: 'modules/breakpoints.ts', 80 | compress: isBuildProd, 81 | options: { 82 | name: 'SwiperPluginBreakpoints' 83 | } 84 | } 85 | ] 86 | const extensions = [ 87 | '.js', '.jsx', '.ts', '.tsx' 88 | ] 89 | const plugins = [ 90 | eslint(), 91 | typescript(), 92 | babel({ 93 | extensions, 94 | include: ['src/**/*'] 95 | }) 96 | ] 97 | 98 | function genConfig (options) { 99 | return options.map(entry => ({ 100 | input: path.resolve('src', entry.input), 101 | plugins: [ 102 | ...plugins, 103 | entry.compress ? uglify() : null, 104 | (isBuildProd || !entry.serve) ? null : serve(path.resolve(__dirname), { 105 | openPage: '/demo/default.html' 106 | }) 107 | ], 108 | output: { 109 | dir: path.resolve('lib', path.dirname(entry.input)), 110 | format: 'umd', 111 | sourcemap: !isBuildProd, 112 | entryFileNames: isBuildProd ? '[name].min.js' : '[name].js', 113 | ...entry.options 114 | } 115 | })) 116 | } 117 | 118 | export default genConfig(entries) 119 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/env/element.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../options' 2 | 3 | export type Element = { 4 | $el: HTMLElement 5 | $list: Array 6 | $wrapper: HTMLElement 7 | } 8 | 9 | export function Element ( 10 | el: HTMLElement | string, 11 | options: Options 12 | ): Element { 13 | const $el = (typeof el === 'string' ? document.body.querySelector(el) : el) 14 | const $wrapper = $el!.querySelector(`.${options.wrapperClass}`) 15 | let $list = [].slice.call($el!.getElementsByClassName(options.slideClass)) 16 | $list = $list.filter((slide: HTMLElement) => slide.getAttribute('data-shallow-slider') === null) 17 | 18 | return { 19 | $el, 20 | $wrapper, 21 | $list 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/env/index.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../options' 2 | import { Element } from './element' 3 | import { Measure } from './measure' 4 | import { Limitation } from './limitation' 5 | 6 | declare global { 7 | interface Window { 8 | DocumentTouch: any 9 | } 10 | const DocumentTouch: any 11 | } 12 | 13 | export type Env = { 14 | touchable: boolean 15 | element: Element 16 | measure: Measure 17 | limitation: Limitation 18 | update (element: Element): void 19 | } 20 | 21 | export function Env ( 22 | elem: Element, 23 | options: Options 24 | ): Env { 25 | const env = {} 26 | 27 | function update (element: Element): void { 28 | const measure = Measure( 29 | options, 30 | element 31 | ) 32 | const limitation = Limitation( 33 | element, 34 | measure, 35 | options 36 | ) 37 | const touchable = Boolean( 38 | 'ontouchstart' in window 39 | || navigator.maxTouchPoints > 0 40 | || navigator.msMaxTouchPoints > 0 41 | || window.DocumentTouch && document instanceof DocumentTouch 42 | ) 43 | 44 | Object.assign(env, { 45 | touchable, 46 | element, 47 | measure, 48 | limitation 49 | }) 50 | } 51 | 52 | env.update = update 53 | 54 | update(elem) 55 | 56 | return env 57 | } 58 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/env/limitation.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../options' 2 | import { Element } from './element' 3 | import { Measure } from './measure' 4 | 5 | export type Limitation = { 6 | min: number 7 | max: number 8 | base: number 9 | expand: number 10 | buffer: number 11 | minIndex: number 12 | maxIndex: number 13 | } 14 | 15 | export function getExpand ( 16 | options: Options 17 | ): number { 18 | if (options.loop) { 19 | // return options.slidesPerView >= element.$list.length 20 | // ? options.slidesPerView - element.$list.length + 1 21 | // : 1 22 | return Math.ceil(options.slidesPerView) 23 | } 24 | return 0 25 | } 26 | 27 | export function Limitation ( 28 | element: Element, 29 | measure: Measure, 30 | options: Options 31 | ): Limitation { 32 | const { 33 | $list 34 | } = element 35 | const { 36 | viewSize, 37 | slideSize, 38 | boxSize 39 | } = measure 40 | const expand = getExpand(options) 41 | const buffer = expand * boxSize 42 | const base = -buffer + (options.centeredSlides 43 | ? (viewSize - slideSize) / 2 44 | : 0) 45 | // [min, max] usually equal to [-x, 0] 46 | const max = base 47 | const min = options.spaceBetween + (options.loop ? slideSize : viewSize) + base - boxSize * $list.length 48 | const minIndex = 0 49 | const maxIndex = $list.length - ((options.centeredSlides || options.loop) 50 | ? 1 51 | : Math.ceil(options.slidesPerView)) 52 | 53 | const limitation = { 54 | max, 55 | min, 56 | base, 57 | expand, 58 | buffer, 59 | minIndex, 60 | maxIndex 61 | } 62 | 63 | return limitation 64 | } 65 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/env/measure.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../options' 2 | import { Element } from './element' 3 | 4 | export type Measure = { 5 | boxSize: number 6 | viewSize: number 7 | slideSize: number 8 | } 9 | 10 | export function Measure ( 11 | options: Options, 12 | element: Element 13 | ): Measure { 14 | const { 15 | $el 16 | } = element 17 | const viewSize = options.isHorizontal ? $el.offsetWidth : $el.offsetHeight 18 | const slideSize = (viewSize - (Math.ceil(options.slidesPerView - 1)) * options.spaceBetween) / options.slidesPerView 19 | const boxSize = slideSize + options.spaceBetween 20 | 21 | return { 22 | boxSize, 23 | viewSize, 24 | slideSize 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/eventHub.ts: -------------------------------------------------------------------------------- 1 | export type EventHub = { 2 | // eslint-disable-next-line @typescript-eslint/ban-types 3 | on (evtName: string, cb: Function): void 4 | off (evtName: string, cb: Function): void 5 | emit (evtName: string, ...data: Array): void 6 | clear (): void 7 | } 8 | 9 | export const LIFE_CYCLES = { 10 | BEFORE_INIT: 'before-init', 11 | AFTER_INIT: 'after-init', 12 | BEFORE_SLIDE: 'before-slide', 13 | SCROLL: 'scroll', 14 | AFTER_SLIDE: 'after-slide', 15 | BEFORE_DESTROY: 'before-destroy', 16 | AFTER_DESTROY: 'after-destroy' 17 | } 18 | 19 | export function EventHub (): EventHub { 20 | let hub: { 21 | [key: string]: Array 22 | } = {} 23 | 24 | function on (evtName: string, cb: Function): void { 25 | if (!hub[evtName]) { 26 | hub[evtName] = [cb] 27 | } else { 28 | hub[evtName].push(cb) 29 | } 30 | } 31 | 32 | function off (evtName: string, cb: Function): void { 33 | if (hub[evtName]) { 34 | const index = hub[evtName].indexOf(cb) 35 | 36 | // eslint-disable-next-line @typescript-eslint/no-unused-expressions 37 | index > -1 && hub[evtName].splice(index, 1) 38 | } 39 | } 40 | 41 | function emit (evtName: string, ...data: Array): void { 42 | if (hub[evtName]) { 43 | hub[evtName].forEach(cb => cb(...data)) 44 | } 45 | } 46 | 47 | function clear (): void { 48 | hub = {} 49 | } 50 | 51 | return { 52 | on, 53 | off, 54 | emit, 55 | clear 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/options.ts: -------------------------------------------------------------------------------- 1 | import { SwiperPlugin } from './index' 2 | import { translate } from './render/layout' 3 | import { State } from './state/index' 4 | import { Env } from './env/index' 5 | import { SwiperPluginLazyloadPartialOptions } from '../modules/lazyload' 6 | import { SwiperPluginPaginationPartialOptions } from '../modules/pagination' 7 | import { SwiperPluginKeyboardControlPartialOptions } from '../modules/keyboardControl' 8 | import { SwiperPluginNavigationPartialOptions } from '../modules/navigation' 9 | import { SwiperPluginMousewheelPartialOptions } from '../modules/mousewheel' 10 | import { SwiperPluginAutoPlayPartialOptions } from '../modules/autoPlay' 11 | 12 | export type Direction = 'horizontal' | 'vertical' 13 | export type Injections = { 14 | translate: ( 15 | state: State, 16 | env: Env, 17 | options: Options, 18 | duration: number 19 | ) => void 20 | } 21 | 22 | export type Options = { 23 | direction: Direction 24 | touchRatio: number 25 | touchAngle: number 26 | longSwipesRatio: number 27 | initialSlide: number 28 | loop: boolean 29 | freeMode: boolean 30 | passiveListeners: boolean 31 | resistance: boolean 32 | resistanceRatio: number 33 | speed: number 34 | longSwipesMs: number 35 | spaceBetween: number 36 | slidesPerView: number 37 | centeredSlides: boolean 38 | slidePrevClass: string 39 | slideNextClass: string 40 | slideActiveClass: string 41 | slideClass: string 42 | wrapperClass: string 43 | touchStartPreventDefault: boolean 44 | touchStartForcePreventDefault: boolean 45 | touchMoveStopPropagation: boolean 46 | excludeElements: Array 47 | isHorizontal: boolean 48 | plugins?: Array 49 | injections: Injections 50 | 51 | // Plugins 52 | lazyload?: SwiperPluginLazyloadPartialOptions 53 | mousewheel?: SwiperPluginMousewheelPartialOptions 54 | keyboard?: SwiperPluginKeyboardControlPartialOptions 55 | navigation?: SwiperPluginNavigationPartialOptions 56 | pagination?: SwiperPluginPaginationPartialOptions 57 | autoplay?: SwiperPluginAutoPlayPartialOptions 58 | } 59 | 60 | export type UserOptions = Partial 61 | 62 | export const defaultOptions: UserOptions = { 63 | // `isHorizontal` is computed value 64 | direction: 'horizontal', 65 | touchRatio: 1, 66 | touchAngle: 45, 67 | longSwipesRatio: 0.5, 68 | initialSlide: 0, 69 | loop: false, 70 | freeMode: false, 71 | passiveListeners: true, 72 | resistance: true, 73 | resistanceRatio: 0.85, 74 | speed: 300, 75 | longSwipesMs: 300, 76 | spaceBetween: 0, 77 | slidesPerView: 1, 78 | centeredSlides: false, 79 | slidePrevClass: 'swiper-slide-prev', 80 | slideNextClass: 'swiper-slide-next', 81 | slideActiveClass: 'swiper-slide-active', 82 | slideClass: 'swiper-slide', 83 | wrapperClass: 'swiper-wrapper', 84 | touchStartPreventDefault: true, 85 | touchStartForcePreventDefault: false, 86 | touchMoveStopPropagation: false, 87 | excludeElements: [], 88 | injections: { 89 | translate 90 | } 91 | } 92 | 93 | export function optionFormatter (userOptions?: UserOptions): Options { 94 | const options = { 95 | ...defaultOptions, 96 | ...userOptions 97 | } 98 | 99 | return { 100 | ...options, 101 | isHorizontal: options.direction === 'horizontal' 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/render/animation.ts: -------------------------------------------------------------------------------- 1 | import { Tick } from './nextTick' 2 | 3 | export type Animation = { 4 | run (task: (interval: DOMHighResTimeStamp) => void): void 5 | stop (): void 6 | } 7 | 8 | export function Animation (): Animation { 9 | const tick = Tick() 10 | 11 | function run (task: (interval: DOMHighResTimeStamp) => void): void { 12 | tick.run((interval: DOMHighResTimeStamp) => { 13 | run(task) 14 | task(interval) 15 | }) 16 | } 17 | 18 | function stop (): void { 19 | tick.stop() 20 | } 21 | 22 | return { 23 | run, 24 | stop 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/render/dom.ts: -------------------------------------------------------------------------------- 1 | export function addClass ( 2 | el: HTMLElement, 3 | list: Array | string = [] 4 | ): void { 5 | if (!Array.isArray(list)) list = [list] 6 | 7 | list.forEach(clz => (!el.classList.contains(clz) && el.classList.add(clz))) 8 | } 9 | 10 | export function removeClass ( 11 | el: HTMLElement, 12 | list: Array | string = [] 13 | ): void { 14 | if (!Array.isArray(list)) list = [list] 15 | 16 | list.forEach(clz => (el.classList.contains(clz) && el.classList.remove(clz))) 17 | } 18 | 19 | export function attachListener ( 20 | el: HTMLElement | Document | Window, 21 | evtName: string, 22 | handler: EventListenerOrEventListenerObject, 23 | opts?: boolean | AddEventListenerOptions 24 | ): void { 25 | el.addEventListener(evtName, handler, opts) 26 | } 27 | 28 | export function detachListener ( 29 | el: HTMLElement | Document | Window, 30 | evtName: string, 31 | handler: EventListenerOrEventListenerObject 32 | ): void { 33 | el.removeEventListener(evtName, handler) 34 | } 35 | 36 | export function removeAttr ( 37 | el: HTMLElement, 38 | attr: string 39 | ): void { 40 | el.removeAttribute(attr) 41 | } 42 | 43 | export function setAttr ( 44 | el: HTMLElement, 45 | attr: string, 46 | value = '' 47 | ): HTMLElement { 48 | el.setAttribute(attr, value) 49 | return el 50 | } 51 | 52 | export function setStyle ( 53 | el: HTMLElement, 54 | style: {[key: string]: string}, 55 | forceRender?: boolean 56 | ): HTMLElement { 57 | Object.keys(style).forEach(prop => { 58 | // TS7015: Element implicitly has an 'any' type because index expression is not of type 'number'. 59 | el.style[prop as any] = style[prop] 60 | }) 61 | // eslint-disable-next-line @typescript-eslint/no-unused-expressions 62 | forceRender && getComputedStyle(el) 63 | 64 | return el 65 | } 66 | 67 | export function getTranslate ( 68 | el: HTMLElement, 69 | isHorizontal: boolean 70 | ): number { 71 | const matrix = getComputedStyle(el).transform.replace(/[a-z]|\(|\)|\s/g, '').split(',').map(parseFloat) 72 | let arr: Array = [] 73 | 74 | if (matrix.length === 16) { 75 | arr = matrix.slice(12, 14) 76 | } else if (matrix.length === 6) { 77 | arr = matrix.slice(4, 6) 78 | } 79 | return (>arr)[isHorizontal ? 0 : 1] || 0 80 | } 81 | 82 | export function stringToElement ( 83 | string: string 84 | ): HTMLElement { 85 | const wrapper = document.createElement('div') 86 | wrapper.innerHTML = string 87 | return wrapper.firstChild as HTMLElement 88 | } 89 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/render/layout.ts: -------------------------------------------------------------------------------- 1 | import { State } from '../state/index' 2 | import { Env } from '../env/index' 3 | import { setStyle } from './dom' 4 | import { Options } from '../options' 5 | 6 | export function translate ( 7 | state: State, 8 | env: Env, 9 | options: Options, 10 | duration: number 11 | ): void { 12 | const { 13 | $wrapper 14 | } = env.element 15 | const wrapperStyle = { 16 | transition: state.isStart 17 | ? 'none' 18 | : `transform ease ${duration}ms`, 19 | transform: options.isHorizontal 20 | ? `translate3d(${state.transforms}px, 0, 0)` 21 | : `translate3d(0, ${state.transforms}px, 0)` 22 | } 23 | 24 | setStyle($wrapper, wrapperStyle) 25 | } 26 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/render/nextTick.ts: -------------------------------------------------------------------------------- 1 | import { now } from './timing' 2 | 3 | export type Tick = { 4 | run (cb: (interval: DOMHighResTimeStamp) => void): void 5 | stop (): void 6 | } 7 | 8 | export const nextFrame = requestAnimationFrame || webkitRequestAnimationFrame || setTimeout 9 | export const cancelNextFrame = cancelAnimationFrame || webkitCancelAnimationFrame || clearTimeout 10 | 11 | export function Tick (): Tick { 12 | let startTime: number | undefined 13 | let id: number 14 | 15 | function run (cb: (interval: DOMHighResTimeStamp) => void): void { 16 | // eslint-disable-next-line no-void 17 | startTime = startTime === void 0 18 | ? now() 19 | : startTime 20 | 21 | // Why do not use callback argument: 22 | // https://stackoverflow.com/questions/50895206/exact-time-of-display-requestanimationframe-usage-and-timeline 23 | id = nextFrame(() => { 24 | const timeStamp = now() 25 | const interval = timeStamp - startTime 26 | 27 | startTime = timeStamp 28 | cb(interval) 29 | }) 30 | } 31 | 32 | function stop (): void { 33 | startTime = undefined 34 | cancelNextFrame(id) 35 | } 36 | 37 | return { 38 | run, 39 | stop 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/render/timing.ts: -------------------------------------------------------------------------------- 1 | type DebounceOptions = { 2 | trailing: boolean 3 | } 4 | 5 | export function now () { 6 | return performance ? performance.now() : Date.now() 7 | } 8 | 9 | export function debounce any> (fn: T, threshold = 200, opt: DebounceOptions = { 10 | trailing: true 11 | }): T { 12 | let lastCallTime: DOMHighResTimeStamp = 0 13 | let lastResult: ReturnType 14 | let lastTimer: NodeJS.Timer | undefined 15 | 16 | return function (...args) { 17 | const currTime = now() 18 | 19 | if (currTime - lastCallTime >= threshold) { 20 | lastCallTime = currTime 21 | lastTimer = void 0 22 | lastResult = fn(...args) 23 | } 24 | 25 | if (opt.trailing) { 26 | lastTimer && clearTimeout(lastTimer) 27 | lastTimer = setTimeout(() => fn(...args), threshold) 28 | } 29 | 30 | return lastResult 31 | } as T 32 | } 33 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/state/index.ts: -------------------------------------------------------------------------------- 1 | import { Tracker } from './trace' 2 | 3 | export interface State { 4 | tracker: Tracker 5 | index: number 6 | startTransform: number 7 | isStart: boolean 8 | isScrolling: boolean 9 | isTouching: boolean 10 | transforms: number 11 | progress: number 12 | } 13 | 14 | export function State (): State { 15 | const state: State = { 16 | tracker: Tracker(), 17 | index: 0, 18 | startTransform: 0, 19 | isStart: false, 20 | isScrolling: false, 21 | isTouching: false, 22 | transforms: 0, 23 | progress: 0 24 | } 25 | 26 | return state 27 | } 28 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/core/state/trace.ts: -------------------------------------------------------------------------------- 1 | const delta = 180 / Math.PI 2 | 3 | export type TraceLogs = Array 4 | 5 | export type Offset = { 6 | /** 7 | * offset x 8 | */ 9 | x: number 10 | 11 | /** 12 | * offset y 13 | */ 14 | y: number 15 | } 16 | 17 | export type Position = { 18 | /** 19 | * postion in the x-axis 20 | */ 21 | x: number 22 | 23 | /** 24 | * postion in the y-axis 25 | */ 26 | y: number 27 | } 28 | 29 | export type Trace = { 30 | /** 31 | * timestamp of current postion 32 | */ 33 | time: number 34 | } & Position 35 | 36 | export type Tracker = { 37 | push (postion: Position): void 38 | vector (): Vector 39 | clear (): void 40 | getLogs (): TraceLogs 41 | getDuration (): number 42 | getOffset (): Offset 43 | } 44 | 45 | export type Vector = { 46 | /** 47 | * offset in the x-axis 48 | */ 49 | x: number 50 | 51 | /** 52 | * offset in the y-axis 53 | */ 54 | y: number 55 | 56 | /** 57 | * velocity in the x-axis 58 | */ 59 | velocityX: number 60 | 61 | /** 62 | * velocity in the y-axis 63 | */ 64 | velocityY: number 65 | 66 | /** 67 | * direction angle 68 | */ 69 | angle: number 70 | } 71 | 72 | export function Vector ( 73 | logs: TraceLogs, 74 | index: number 75 | ): Vector { 76 | const trace = logs[index] 77 | const formerTrace = logs[index - 1] || trace // In case click action, there will be only one log data 78 | const diff = { 79 | x: trace.x - formerTrace.x, 80 | y: trace.y - formerTrace.y 81 | } 82 | const duration = trace.time - formerTrace.time 83 | const velocityX = diff.x / duration || 0 84 | const velocityY = diff.y / duration || 0 85 | const angle = Math.atan2(Math.abs(diff.y), Math.abs(diff.x)) * delta 86 | 87 | return { 88 | ...diff, 89 | angle, 90 | velocityX, 91 | velocityY 92 | } 93 | } 94 | 95 | export function Tracker (): Tracker { 96 | let logs: TraceLogs = [] 97 | 98 | function push (position: Position): void { 99 | logs.push({ 100 | time: Date.now(), 101 | ...position 102 | }) 103 | } 104 | 105 | function vector (): Vector { 106 | return Vector(logs, logs.length - 1) 107 | } 108 | 109 | function clear () { 110 | logs = [] 111 | } 112 | 113 | function getLogs () { 114 | return logs 115 | } 116 | 117 | function getDuration (): number { 118 | const first = logs[0] 119 | const last = logs[logs.length - 1] 120 | 121 | return first ? last.time - first.time : 0 122 | } 123 | 124 | function getOffset (): Offset { 125 | const first = logs[0] 126 | const last = logs[logs.length - 1] 127 | 128 | return first ? { 129 | x: last.x - first.x, 130 | y: last.y - first.y 131 | } : { 132 | x: 0, 133 | y: 0 134 | } 135 | } 136 | 137 | return { 138 | getDuration, 139 | getOffset, 140 | getLogs, 141 | vector, 142 | clear, 143 | push 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/index.esm.ts: -------------------------------------------------------------------------------- 1 | import SwiperPluginLazyload from './modules/lazyload' 2 | import SwiperPluginPagination from './modules/pagination' 3 | import SwiperPluginKeyboardControl from './modules/keyboardControl' 4 | import SwiperPluginMousewheel from './modules/mousewheel' 5 | import SwiperPluginNavigation from './modules/navigation' 6 | import SwiperPluginBreakpoints from './modules/breakpoints' 7 | 8 | export { 9 | Swiper, 10 | SwiperInstance, 11 | SwiperPlugin, 12 | default 13 | } from './core/index' 14 | 15 | export { 16 | LIFE_CYCLES 17 | } from './core/eventHub' 18 | 19 | export { 20 | SwiperPluginLazyload, 21 | SwiperPluginPagination, 22 | SwiperPluginKeyboardControl, 23 | SwiperPluginMousewheel, 24 | SwiperPluginNavigation, 25 | SwiperPluginBreakpoints 26 | } 27 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/index.full.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-named-default 2 | import { default as Swiper, SwiperPlugin } from './core/index' 3 | 4 | import SwiperPluginLazyload from './modules/lazyload' 5 | import SwiperPluginPagination from './modules/pagination' 6 | import SwiperPluginKeyboardControl from './modules/keyboardControl' 7 | import SwiperPluginMousewheel from './modules/mousewheel' 8 | import SwiperPluginNavigation from './modules/navigation' 9 | import SwiperPluginBreakpoints from './modules/breakpoints' 10 | 11 | const plugins = [ 12 | SwiperPluginLazyload, 13 | SwiperPluginPagination, 14 | SwiperPluginKeyboardControl, 15 | SwiperPluginMousewheel, 16 | SwiperPluginNavigation, 17 | SwiperPluginBreakpoints 18 | ] 19 | 20 | Swiper.use(plugins as Array) 21 | 22 | export default Swiper 23 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Swiper, 3 | SwiperInstance, 4 | SwiperPlugin, 5 | default 6 | } from './core/index' 7 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/modules/breakpoints.ts: -------------------------------------------------------------------------------- 1 | import { debounce } from '../core/render/timing' 2 | import { Options, UserOptions } from '../core/options' 3 | import { SwiperInstance, SwiperPlugin } from '../core/index' 4 | import { LIFE_CYCLES } from '../core/eventHub' 5 | import { nextFrame } from '../core/render/nextTick' 6 | 7 | export type SwiperPluginBreakpointsInstance = { 8 | update (): void 9 | } 10 | export type SwiperPluginBreakpointsOptions = { 11 | [key in number]: UserOptions 12 | } 13 | 14 | /** 15 | * TinySwiper plugin for breakpoints. 16 | * 17 | * @param {SwiperInstance} instance 18 | * @param {Options} 19 | */ 20 | export default function SwiperPluginBreakpoints ( 21 | instance: SwiperInstance & { 22 | breakpoints?: SwiperPluginBreakpointsInstance 23 | }, 24 | options: Options & { 25 | breakpoints?: SwiperPluginBreakpointsOptions 26 | breakpointsBase?: string 27 | } 28 | ): void { 29 | const isEnabled = Boolean(options.breakpoints) 30 | const breakpoints: SwiperPluginBreakpointsInstance = { 31 | update (): void { 32 | 33 | if (!options.breakpoints) return 34 | 35 | for (const [breakpoint, values] of Object.entries(options.breakpoints)) { 36 | if ('window' === options.breakpointsBase) { 37 | if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches) { 38 | instance.options = Object.assign(instance.options, values) 39 | } 40 | } else if (+breakpoint <= instance.env.element.$el.offsetWidth) { 41 | instance.options = Object.assign(instance.options, values) 42 | } 43 | } 44 | nextFrame(instance.updateSize) 45 | } 46 | } 47 | 48 | if (!isEnabled) return 49 | 50 | const resizeListener = debounce(breakpoints.update, 200) // the default timeout is 200ms 51 | 52 | instance.on(LIFE_CYCLES.AFTER_INIT, () => { 53 | instance.breakpoints = breakpoints 54 | window.addEventListener('resize', resizeListener, { passive: true }) 55 | }) 56 | instance.on(LIFE_CYCLES.BEFORE_DESTROY, () => { 57 | window.removeEventListener('resize', resizeListener) 58 | }) 59 | } 60 | -------------------------------------------------------------------------------- /packages/tiny-swiper/src/modules/mousewheel.ts: -------------------------------------------------------------------------------- 1 | import { 2 | attachListener, 3 | detachListener 4 | } from '../core/render/dom' 5 | import { SwiperInstance, SwiperPlugin } from '../core/index' 6 | import { Options } from '../core/options' 7 | 8 | export type SwiperPluginMousewheelOptions = { 9 | invert: boolean 10 | sensitivity: number 11 | interval: number 12 | } 13 | 14 | export type SwiperPluginMousewheelPartialOptions = Partial 15 | 16 | export type SwiperPluginMousewheelInstance = { 17 | $el?: HTMLElement 18 | } 19 | 20 | export default function SwiperPluginMousewheel ( 21 | instance: SwiperInstance & { 22 | mousewheel?: SwiperPluginMousewheelInstance 23 | }, 24 | options: Options & { 25 | mousewheel?: SwiperPluginMousewheelPartialOptions 26 | } 27 | ) { 28 | const isEnable = Boolean(options.mousewheel) 29 | const mousewheelOptions = Object.assign({ 30 | invert: false, 31 | sensitivity: 1, 32 | interval: 400 33 | }, options.mousewheel) 34 | const mousewheelInstance = { 35 | $el: null 36 | } as unknown as SwiperPluginMousewheelInstance 37 | const wheelStatus = { 38 | wheeling: false, 39 | wheelDelta: 0, 40 | wheelingTimer: 0 41 | } 42 | const handler = (e: WheelEvent) => { 43 | const isHorizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY) 44 | 45 | if (options.isHorizontal !== isHorizontal) return 46 | 47 | const delta = isHorizontal 48 | ? e.deltaX 49 | : e.deltaY 50 | const { 51 | index 52 | } = instance.state 53 | 54 | if ((Math.abs(delta) - Math.abs(wheelStatus.wheelDelta) > 0) 55 | && !wheelStatus.wheeling 56 | && Math.abs(delta) >= mousewheelOptions.sensitivity 57 | ) { 58 | const step = mousewheelOptions.invert ? 1 : -1 59 | 60 | instance.slideTo(delta > 0 61 | ? index - step 62 | : index + step 63 | ) 64 | wheelStatus.wheeling = true 65 | wheelStatus.wheelingTimer = setTimeout(() => { 66 | wheelStatus.wheeling = false 67 | }, mousewheelOptions.interval) as unknown as number 68 | } 69 | wheelStatus.wheelDelta = delta 70 | e.preventDefault() 71 | e.stopPropagation() 72 | } 73 | 74 | instance.on('after-init', () => { 75 | if (!isEnable) return 76 | 77 | const { 78 | element 79 | } = instance.env 80 | const { 81 | $el 82 | } = element 83 | 84 | mousewheelInstance.$el = $el 85 | 86 | attachListener($el, 'wheel', handler) 87 | }) 88 | 89 | instance.on('after-destroy', () => { 90 | if (!isEnable) return 91 | 92 | detachListener(mousewheelInstance.$el, 'wheel', handler) 93 | 94 | delete mousewheelInstance.$el 95 | }) 96 | } 97 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/env/element.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../options'; 2 | export declare type Element = { 3 | $el: HTMLElement; 4 | $list: Array; 5 | $wrapper: HTMLElement; 6 | }; 7 | export declare function Element(el: HTMLElement | string, options: Options): Element; 8 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/env/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../options'; 2 | import { Element } from './element'; 3 | import { Measure } from './measure'; 4 | import { Limitation } from './limitation'; 5 | declare global { 6 | interface Window { 7 | DocumentTouch: any; 8 | } 9 | const DocumentTouch: any; 10 | } 11 | export declare type Env = { 12 | touchable: boolean; 13 | element: Element; 14 | measure: Measure; 15 | limitation: Limitation; 16 | update(element: Element): void; 17 | }; 18 | export declare function Env(elem: Element, options: Options): Env; 19 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/env/limitation.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../options'; 2 | import { Element } from './element'; 3 | import { Measure } from './measure'; 4 | export declare type Limitation = { 5 | min: number; 6 | max: number; 7 | base: number; 8 | expand: number; 9 | buffer: number; 10 | minIndex: number; 11 | maxIndex: number; 12 | }; 13 | export declare function getExpand(options: Options): number; 14 | export declare function Limitation(element: Element, measure: Measure, options: Options): Limitation; 15 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/env/measure.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../options'; 2 | import { Element } from './element'; 3 | export declare type Measure = { 4 | boxSize: number; 5 | viewSize: number; 6 | slideSize: number; 7 | }; 8 | export declare function Measure(options: Options, element: Element): Measure; 9 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/eventHub.d.ts: -------------------------------------------------------------------------------- 1 | export declare type EventHub = { 2 | on(evtName: string, cb: Function): void; 3 | off(evtName: string, cb: Function): void; 4 | emit(evtName: string, ...data: Array): void; 5 | clear(): void; 6 | }; 7 | export declare const LIFE_CYCLES: { 8 | BEFORE_INIT: string; 9 | AFTER_INIT: string; 10 | BEFORE_SLIDE: string; 11 | SCROLL: string; 12 | AFTER_SLIDE: string; 13 | BEFORE_DESTROY: string; 14 | AFTER_DESTROY: string; 15 | }; 16 | export declare function EventHub(): EventHub; 17 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/index.d.ts: -------------------------------------------------------------------------------- 1 | import { UserOptions, Options } from './options'; 2 | import { State } from './state/index'; 3 | import { Env } from './env/index'; 4 | export declare type SwiperInstance = { 5 | on: (evtName: string, cb: Function) => void; 6 | off: (evtName: string, cb: Function) => void; 7 | update: () => void; 8 | destroy: () => void; 9 | slideTo: (index: number, duration?: number) => void; 10 | options: Options; 11 | env: Env; 12 | state: State; 13 | updateSize: () => void; 14 | [key: string]: any; 15 | }; 16 | export declare type SwiperPlugin = (instance: SwiperInstance, options: Options) => void; 17 | export declare type Swiper = { 18 | (el: HTMLElement | string, userOptions?: UserOptions): SwiperInstance; 19 | new (el: HTMLElement | string, userOptions?: UserOptions): SwiperInstance; 20 | use: (plugins: Array) => void; 21 | plugins: Array; 22 | }; 23 | declare const Swiper: Swiper; 24 | export default Swiper; 25 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/options.d.ts: -------------------------------------------------------------------------------- 1 | import { SwiperPlugin } from './index'; 2 | import { State } from './state/index'; 3 | import { Env } from './env/index'; 4 | import { SwiperPluginLazyloadPartialOptions } from '../modules/lazyload'; 5 | import { SwiperPluginPaginationPartialOptions } from '../modules/pagination'; 6 | import { SwiperPluginKeyboardControlPartialOptions } from '../modules/keyboardControl'; 7 | import { SwiperPluginNavigationPartialOptions } from '../modules/navigation'; 8 | import { SwiperPluginMousewheelPartialOptions } from '../modules/mousewheel'; 9 | import { SwiperPluginAutoPlayPartialOptions } from '../modules/autoPlay'; 10 | export declare type Direction = 'horizontal' | 'vertical'; 11 | export declare type Injections = { 12 | translate: (state: State, env: Env, options: Options, duration: number) => void; 13 | }; 14 | export declare type Options = { 15 | direction: Direction; 16 | touchRatio: number; 17 | touchAngle: number; 18 | longSwipesRatio: number; 19 | initialSlide: number; 20 | loop: boolean; 21 | freeMode: boolean; 22 | passiveListeners: boolean; 23 | resistance: boolean; 24 | resistanceRatio: number; 25 | speed: number; 26 | longSwipesMs: number; 27 | spaceBetween: number; 28 | slidesPerView: number; 29 | centeredSlides: boolean; 30 | slidePrevClass: string; 31 | slideNextClass: string; 32 | slideActiveClass: string; 33 | slideClass: string; 34 | wrapperClass: string; 35 | touchStartPreventDefault: boolean; 36 | touchStartForcePreventDefault: boolean; 37 | touchMoveStopPropagation: boolean; 38 | excludeElements: Array; 39 | isHorizontal: boolean; 40 | plugins?: Array; 41 | injections: Injections; 42 | lazyload?: SwiperPluginLazyloadPartialOptions; 43 | mousewheel?: SwiperPluginMousewheelPartialOptions; 44 | keyboard?: SwiperPluginKeyboardControlPartialOptions; 45 | navigation?: SwiperPluginNavigationPartialOptions; 46 | pagination?: SwiperPluginPaginationPartialOptions; 47 | autoplay?: SwiperPluginAutoPlayPartialOptions; 48 | }; 49 | export declare type UserOptions = Partial; 50 | export declare const defaultOptions: UserOptions; 51 | export declare function optionFormatter(userOptions?: UserOptions): Options; 52 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/render/animation.d.ts: -------------------------------------------------------------------------------- 1 | export declare type Animation = { 2 | run(task: (interval: DOMHighResTimeStamp) => void): void; 3 | stop(): void; 4 | }; 5 | export declare function Animation(): Animation; 6 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/render/dom.d.ts: -------------------------------------------------------------------------------- 1 | export declare function addClass(el: HTMLElement, list?: Array | string): void; 2 | export declare function removeClass(el: HTMLElement, list?: Array | string): void; 3 | export declare function attachListener(el: HTMLElement | Document | Window, evtName: string, handler: EventListenerOrEventListenerObject, opts?: boolean | AddEventListenerOptions): void; 4 | export declare function detachListener(el: HTMLElement | Document | Window, evtName: string, handler: EventListenerOrEventListenerObject): void; 5 | export declare function removeAttr(el: HTMLElement, attr: string): void; 6 | export declare function setAttr(el: HTMLElement, attr: string, value?: string): HTMLElement; 7 | export declare function setStyle(el: HTMLElement, style: { 8 | [key: string]: string; 9 | }, forceRender?: boolean): HTMLElement; 10 | export declare function getTranslate(el: HTMLElement, isHorizontal: boolean): number; 11 | export declare function stringToElement(string: string): HTMLElement; 12 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/render/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../options'; 2 | import { State } from '../state/index'; 3 | import { Env } from '../env/index'; 4 | export declare type Renderer = { 5 | init(): void; 6 | render(state: State, duration?: number, cb?: Function, force?: boolean): void; 7 | destroy(): void; 8 | updateSize(): void; 9 | }; 10 | export declare function Renderer(env: Env, options: Options): Renderer; 11 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/render/layout.d.ts: -------------------------------------------------------------------------------- 1 | import { State } from '../state/index'; 2 | import { Env } from '../env/index'; 3 | import { Options } from '../options'; 4 | export declare function translate(state: State, env: Env, options: Options, duration: number): void; 5 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/render/nextTick.d.ts: -------------------------------------------------------------------------------- 1 | export declare type Tick = { 2 | run(cb: (interval: DOMHighResTimeStamp) => void): void; 3 | stop(): void; 4 | }; 5 | export declare const nextFrame: typeof webkitRequestAnimationFrame | typeof setTimeout; 6 | export declare const cancelNextFrame: typeof webkitCancelAnimationFrame | typeof clearTimeout; 7 | export declare function Tick(): Tick; 8 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/render/timing.d.ts: -------------------------------------------------------------------------------- 1 | declare type DebounceOptions = { 2 | trailing: boolean; 3 | }; 4 | export declare function now(): number; 5 | export declare function debounce any>(fn: T, threshold?: number, opt?: DebounceOptions): T; 6 | export {}; 7 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/sensor/actions.d.ts: -------------------------------------------------------------------------------- 1 | import { Position } from '../state/trace'; 2 | import { Options } from '../options'; 3 | import { Env } from '../env/index'; 4 | import { State } from '../state/index'; 5 | import { Operations } from '../state/operations'; 6 | export declare type Actions = { 7 | preheat(originPosition: Position, originTransform: number): void; 8 | move(position: Position): void; 9 | stop(): void; 10 | }; 11 | export declare function Actions(options: Options, env: Env, state: State, operations: Operations): { 12 | preheat: (originPosition: Position, originTransform: number) => void; 13 | move: (position: Position) => void; 14 | stop: () => void; 15 | }; 16 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/sensor/index.d.ts: -------------------------------------------------------------------------------- 1 | import { State } from '../state/index'; 2 | import { Env } from '../env/index'; 3 | import { Options } from '../options'; 4 | import { Operations } from '../state/operations'; 5 | export declare type Sensor = { 6 | attach: () => void; 7 | detach: () => void; 8 | }; 9 | export declare function Sensor(env: Env, state: State, options: Options, operations: Operations): Sensor; 10 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/state/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Tracker } from './trace'; 2 | export interface State { 3 | tracker: Tracker; 4 | index: number; 5 | startTransform: number; 6 | isStart: boolean; 7 | isScrolling: boolean; 8 | isTouching: boolean; 9 | transforms: number; 10 | progress: number; 11 | } 12 | export declare function State(): State; 13 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/state/operations.d.ts: -------------------------------------------------------------------------------- 1 | import { State } from './index'; 2 | import { Limitation } from '../env/limitation'; 3 | import { EventHub } from '../eventHub'; 4 | import { Renderer } from '../render/index'; 5 | import { Options } from '../options'; 6 | import { Env } from '../env/index'; 7 | export interface Operations { 8 | update(): void; 9 | render(duration?: number): void; 10 | transform(trans: number): void; 11 | slideTo(targetIndex: number, duration?: number): void; 12 | scrollPixel(px: number): void; 13 | initStatus(startTransform?: number): void; 14 | initLayout(originTransform: number): void; 15 | getOffsetSteps(offset: number): number; 16 | } 17 | /** 18 | * Detect whether slides is rush out boundary. 19 | * @param velocity - Velocity larger than zero means that slides move to the right direction 20 | * @param transform 21 | * @param limitation 22 | */ 23 | export declare function isExceedingLimits(velocity: number, transform: number, limitation: Limitation): boolean; 24 | /** 25 | * Return the shortest way to target Index. 26 | * Negative number indicate the left direction, Index's value is decreasing. 27 | * Positive number means index should increase. 28 | * @param currentIndex 29 | * @param targetIndex 30 | * @param limitation 31 | * @param defaultWay 32 | */ 33 | export declare function getShortestWay(currentIndex: number, targetIndex: number, limitation: Limitation, defaultWay: number): number; 34 | /** 35 | * Get transform exceed value 36 | * Return zero if is not reached border. 37 | * 38 | * @param transform 39 | * @param limitation 40 | */ 41 | export declare function getExcess(transform: number, limitation: Limitation): number; 42 | /** 43 | * The Set of state operations. 44 | * Every external Render/Sensor/DomHandler are called by this Internal state machine. 45 | * That gives us the possibility to run Tiny-Swiper in different platform. 46 | * 47 | * @param env 48 | * @param state 49 | * @param options 50 | * @param renderer 51 | * @param eventHub 52 | * @constructor 53 | */ 54 | export declare function Operations(env: Env, state: State, options: Options, renderer: Renderer, eventHub: EventHub): Operations; 55 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/core/state/trace.d.ts: -------------------------------------------------------------------------------- 1 | export declare type TraceLogs = Array; 2 | export declare type Offset = { 3 | /** 4 | * offset x 5 | */ 6 | x: number; 7 | /** 8 | * offset y 9 | */ 10 | y: number; 11 | }; 12 | export declare type Position = { 13 | /** 14 | * postion in the x-axis 15 | */ 16 | x: number; 17 | /** 18 | * postion in the y-axis 19 | */ 20 | y: number; 21 | }; 22 | export declare type Trace = { 23 | /** 24 | * timestamp of current postion 25 | */ 26 | time: number; 27 | } & Position; 28 | export declare type Tracker = { 29 | push(postion: Position): void; 30 | vector(): Vector; 31 | clear(): void; 32 | getLogs(): TraceLogs; 33 | getDuration(): number; 34 | getOffset(): Offset; 35 | }; 36 | export declare type Vector = { 37 | /** 38 | * offset in the x-axis 39 | */ 40 | x: number; 41 | /** 42 | * offset in the y-axis 43 | */ 44 | y: number; 45 | /** 46 | * velocity in the x-axis 47 | */ 48 | velocityX: number; 49 | /** 50 | * velocity in the y-axis 51 | */ 52 | velocityY: number; 53 | /** 54 | * direction angle 55 | */ 56 | angle: number; 57 | }; 58 | export declare function Vector(logs: TraceLogs, index: number): Vector; 59 | export declare function Tracker(): Tracker; 60 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export { Swiper, SwiperInstance, SwiperPlugin, default } from './core/index'; 2 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/index.esm.d.ts: -------------------------------------------------------------------------------- 1 | import SwiperPluginLazyload from './modules/lazyload'; 2 | import SwiperPluginPagination from './modules/pagination'; 3 | import SwiperPluginKeyboardControl from './modules/keyboardControl'; 4 | import SwiperPluginMousewheel from './modules/mousewheel'; 5 | import SwiperPluginNavigation from './modules/navigation'; 6 | import SwiperPluginBreakpoints from './modules/breakpoints'; 7 | export { Swiper, SwiperInstance, SwiperPlugin, default } from './core/index'; 8 | export { LIFE_CYCLES } from './core/eventHub'; 9 | export { SwiperPluginLazyload, SwiperPluginPagination, SwiperPluginKeyboardControl, SwiperPluginMousewheel, SwiperPluginNavigation, SwiperPluginBreakpoints }; 10 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/index.full.d.ts: -------------------------------------------------------------------------------- 1 | import { default as Swiper } from './core/index'; 2 | export default Swiper; 3 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/modules/autoPlay.d.ts: -------------------------------------------------------------------------------- 1 | import { SwiperPlugin } from '../core/index'; 2 | export declare type SwiperPluginAutoPlayOptions = { 3 | delay: number; 4 | disableOnInteraction: boolean; 5 | reverseDirection: boolean; 6 | stopOnLastSlide: boolean; 7 | waitForTransition: boolean; 8 | }; 9 | export declare type SwiperPluginAutoPlayPartialOptions = Partial | boolean; 10 | export declare type SwiperPluginAutoPlayInstance = {}; 11 | declare const _default: SwiperPlugin; 12 | /** 13 | * TinySwiper plugin for auto paly. 14 | * 15 | * @param {SwiperInstance} instance 16 | * @param {Options} 17 | */ 18 | export default _default; 19 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/modules/breakpoints.d.ts: -------------------------------------------------------------------------------- 1 | import { UserOptions } from '../core/options'; 2 | import { SwiperPlugin } from '../core/index'; 3 | export declare type SwiperPluginBreakpointsInstance = { 4 | update(): void; 5 | }; 6 | export declare type SwiperPluginBreakpointsOptions = { 7 | [key in number]: UserOptions; 8 | }; 9 | declare const _default: SwiperPlugin; 10 | /** 11 | * TinySwiper plugin for breakpoints. 12 | * 13 | * @param {SwiperInstance} instance 14 | * @param {Options} 15 | */ 16 | export default _default; 17 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/modules/keyboardControl.d.ts: -------------------------------------------------------------------------------- 1 | import { SwiperPlugin } from '../core/index'; 2 | export declare type SwiperPluginKeyboardControlOptions = { 3 | enabled: boolean; 4 | onlyInViewport: boolean; 5 | }; 6 | export declare type SwiperPluginKeyboardControlPartialOptions = Partial | boolean; 7 | export declare type SwiperPluginKeyboardInstance = { 8 | onKeyDown(e: Event): void; 9 | enable(): void; 10 | disable(): void; 11 | }; 12 | declare const _default: SwiperPlugin; 13 | /** 14 | * TinySwiper plugin for keyboard control. 15 | * 16 | * @param {SwiperInstance} instance 17 | * @param {Options} 18 | */ 19 | export default _default; 20 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/modules/lazyload.d.ts: -------------------------------------------------------------------------------- 1 | import { SwiperPlugin } from '../core/index'; 2 | export declare type SwiperPluginLazyloadOptions = { 3 | loadPrevNext: boolean; 4 | loadPrevNextAmount: number; 5 | loadOnTransitionStart: boolean; 6 | elementClass: string; 7 | loadingClass: string; 8 | loadedClass: string; 9 | preloaderClass: string; 10 | }; 11 | export declare type SwiperPluginLazyloadPartialOptions = Partial | boolean; 12 | export declare type SwiperPluginLazyloadHTMLElement = HTMLImageElement & { 13 | isLoaded: boolean; 14 | }; 15 | export declare type SwiperPluginLazyloadInstance = { 16 | load(index: number): void; 17 | loadRange(index: number, range: number): void; 18 | }; 19 | declare const _default: SwiperPlugin; 20 | /** 21 | * TinySwiper plugin for image lazy loading. 22 | * 23 | * @param {SwiperInstance} instance 24 | * @param {Options} 25 | */ 26 | export default _default; 27 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/modules/mousewheel.d.ts: -------------------------------------------------------------------------------- 1 | import { SwiperPlugin } from '../core/index'; 2 | export declare type SwiperPluginMousewheelOptions = { 3 | invert: boolean; 4 | sensitivity: number; 5 | interval: number; 6 | }; 7 | export declare type SwiperPluginMousewheelPartialOptions = Partial; 8 | export declare type SwiperPluginMousewheelInstance = { 9 | $el?: HTMLElement; 10 | }; 11 | declare const _default: SwiperPlugin; 12 | export default _default; 13 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/modules/navigation.d.ts: -------------------------------------------------------------------------------- 1 | import { SwiperPlugin } from '../core/index'; 2 | export declare type SwiperPluginNavigationOptions = { 3 | nextEl: HTMLElement | string; 4 | prevEl: HTMLElement | string; 5 | disabledClass: string; 6 | }; 7 | export declare type SwiperPluginNavigationPartialOptions = Partial; 8 | export declare type SwiperPluginNavigationInstance = { 9 | nextEl?: HTMLElement; 10 | prevEl?: HTMLElement; 11 | }; 12 | declare const _default: SwiperPlugin; 13 | export default _default; 14 | -------------------------------------------------------------------------------- /packages/tiny-swiper/types/modules/pagination.d.ts: -------------------------------------------------------------------------------- 1 | import { SwiperPlugin } from '../core/index'; 2 | export declare type SwiperPluginPaginationOptions = { 3 | el: string; 4 | clickable: boolean; 5 | clickableClass: 'swiper-pagination-clickable'; 6 | bulletClass: string | 'swiper-pagination-bullet'; 7 | bulletActiveClass: string | 'swiper-pagination-bullet-active'; 8 | renderBullet: Function; 9 | }; 10 | export declare type SwiperPluginPaginationPartialOptions = Partial; 11 | export declare type SwiperPluginPaginationInstance = { 12 | $pageList: HTMLElement[]; 13 | $pagination: HTMLElement | null; 14 | }; 15 | declare const _default: SwiperPlugin; 16 | export default _default; 17 | -------------------------------------------------------------------------------- /packages/website/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /packages/website/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [1.1.2](https://github.com/joe223/tiny-swiper/compare/tiny-swiper-website@1.1.1...tiny-swiper-website@1.1.2) (2021-08-12) 7 | 8 | **Note:** Version bump only for package tiny-swiper-website 9 | 10 | 11 | 12 | 13 | 14 | ## [1.0.3](https://github.com/joe223/tiny-swiper/compare/tiny-swiper-website@1.0.2...tiny-swiper-website@1.0.3) (2021-02-02) 15 | 16 | **Note:** Version bump only for package tiny-swiper-website 17 | 18 | 19 | 20 | 21 | 22 | ## [1.0.2](https://github.com/joe223/tiny-swiper/compare/tiny-swiper-website@1.0.1...tiny-swiper-website@1.0.2) (2021-01-24) 23 | 24 | **Note:** Version bump only for package tiny-swiper-website 25 | 26 | 27 | 28 | 29 | 30 | ## [1.0.1](https://github.com/joe223/tiny-swiper/compare/tiny-swiper-website@1.0.0...tiny-swiper-website@1.0.1) (2021-01-17) 31 | 32 | **Note:** Version bump only for package tiny-swiper-website 33 | -------------------------------------------------------------------------------- /packages/website/CNAME: -------------------------------------------------------------------------------- 1 | tiny-swiper.js.org 2 | -------------------------------------------------------------------------------- /packages/website/README.md: -------------------------------------------------------------------------------- 1 | # Tiny-Swiper Website 2 | 3 | This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator. 4 | 5 | ## Installation 6 | 7 | ```console 8 | yarn install 9 | ``` 10 | 11 | ## Local Development 12 | 13 | ```console 14 | yarn start 15 | ``` 16 | 17 | This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ## Build 20 | 21 | ```console 22 | yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ## Deployment 28 | 29 | ```console 30 | GIT_USER= USE_SSH=true yarn deploy 31 | ``` 32 | 33 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 34 | -------------------------------------------------------------------------------- /packages/website/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /packages/website/docs/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: changelog 3 | title: Changelog 4 | --- 5 | 6 | # v2.0.0 7 | 8 | - Add: `loop` parameter 9 | - Add: `freeMode` parameter 10 | 11 | -------------------------------------------------------------------------------- /packages/website/docs/get-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: get-started 3 | title: Get Started 4 | sidebar_label: Get Started 5 | slug: / 6 | --- 7 | 8 | Install Swiper via npm or yarn: 9 | 10 | ```shell 11 | $ npm install tiny-swiper --save 12 | $ yarn add tiny-swiper 13 | ``` 14 | 15 | If you prefer CDN, just make sure constructor `Swiper` is defined in browser global environment. 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | Html code: 22 | 23 | ```html 24 | 25 |
26 | 27 |
28 | 29 |
Slide 1
30 |
Slide 2
31 |
Slide 3
32 | ... 33 |
34 | 35 |
36 |
37 | ``` 38 | 39 | JavaScript/TypeScript code: 40 | 41 | ```javascript 42 | import Swiper, { 43 | SwiperPluginLazyload, 44 | SwiperPluginPagination 45 | } from 'tiny-swiper' 46 | 47 | Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ]) 48 | 49 | const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters) 50 | ``` 51 | 52 | - `new Swiper()` - initialize swiper with options. 53 | - `Swiper.use()` - Register plugin. 54 | - `swiperContainer` - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required. 55 | - `parameters` - object with Swiper parameters. Optional. 56 | 57 | 58 | You also can load full-featured Tiny-Swiper: 59 | 60 | ```javascript 61 | import Swiper from 'tiny-swiper/lib/index.full.js' 62 | ``` 63 | 64 | ```html 65 | 66 | ``` 67 | -------------------------------------------------------------------------------- /packages/website/docusaurus.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins', 3 | tagline: 'The tagline of my site', 4 | url: 'https://tiny-swiper.js.org', 5 | baseUrl: '/', 6 | onBrokenLinks: 'throw', 7 | favicon: 'img/favicon.ico', 8 | organizationName: 'joe223', // Usually your GitHub org/user name. 9 | projectName: 'tiny-swiper', // Usually your repo name. 10 | plugins: [ 11 | 'docusaurus-plugin-sass' 12 | ], 13 | themeConfig: { 14 | prism: { 15 | theme: require('prism-react-renderer/themes/github'), 16 | darkTheme: require('prism-react-renderer/themes/dracula') 17 | }, 18 | navbar: { 19 | title: 'Tiny-Swiper', 20 | logo: { 21 | alt: 'Tiny-Swiper Logo', 22 | src: 'img/logo.svg' 23 | }, 24 | items: [ 25 | { 26 | to: 'docs/', 27 | activeBasePath: 'docs', 28 | label: 'Docs', 29 | position: 'left' 30 | }, 31 | { 32 | to: 'docs/demo/', 33 | activeBasePath: 'docs', 34 | label: 'Demos', 35 | position: 'left' 36 | }, 37 | // right 38 | { 39 | type: 'docsVersionDropdown', 40 | position: 'right', 41 | }, 42 | { 43 | href: 'https://github.com/joe223/tiny-swiper', 44 | label: 'GitHub', 45 | position: 'right' 46 | } 47 | ] 48 | }, 49 | googleAnalytics: { 50 | trackingID: 'UA-153214295-1', 51 | // Optional fields. 52 | anonymizeIP: true, // Should IPs be anonymized 53 | } 54 | }, 55 | presets: [ 56 | [ 57 | '@docusaurus/preset-classic', 58 | { 59 | docs: { 60 | sidebarPath: require.resolve('./sidebars.js'), 61 | editUrl: 62 | 'https://github.com/joe223/tiny-swiper/blob/dev_2.0/packages/website/docs' 63 | }, 64 | blog: { 65 | showReadingTime: true, 66 | editUrl: 67 | 'https://github.com/joe223/tiny-swiper/edit/master/website/docs/' 68 | }, 69 | theme: { 70 | customCss: require.resolve('./src/css/custom.css') 71 | } 72 | } 73 | ] 74 | ] 75 | } 76 | -------------------------------------------------------------------------------- /packages/website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tiny-swiper-website", 3 | "private": true, 4 | "version": "1.1.2", 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build --out-dir ../../docs && cp CNAME ../../docs", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "serve": "docusaurus serve" 12 | }, 13 | "dependencies": { 14 | "@docusaurus/core": "^2.0.0-beta.0", 15 | "@docusaurus/plugin-google-analytics": "^2.0.0-beta.0", 16 | "@docusaurus/preset-classic": "^2.0.0-beta.0", 17 | "@docusaurus/theme-live-codeblock": "^2.0.0-beta.0", 18 | "@mdx-js/react": "^1.5.8", 19 | "clsx": "^1.1.1", 20 | "react": "^16.8.4", 21 | "react-dom": "^16.8.4", 22 | "tiny-swiper": "^2.1.2", 23 | "typescript": "^4.1.3" 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | }, 37 | "devDependencies": { 38 | "@docusaurus/module-type-aliases": "^2.0.0-alpha.69", 39 | "@tsconfig/docusaurus": "^1.0.2", 40 | "@types/react": "^17.0.0", 41 | "@types/react-helmet": "^6.1.0", 42 | "@types/react-router-dom": "^5.1.6", 43 | "docusaurus-plugin-sass": "^0.1.11", 44 | "sass": "^1.34.0", 45 | "typescript": "^4.1.3" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/website/sidebars.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | someSidebar: { 3 | Guide: ['get-started', 'api'], 4 | APIs: [], 5 | Changelog: ['changelog'] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/website/src/components/Demo/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { createRef, useCallback, useEffect, useState } from 'react' 2 | import Swiper, { SwiperPluginBreakpoints } from 'tiny-swiper/lib/index.esm' 3 | import './index.scss' 4 | import StackblitzIcon from '../../../static/img/stackblitz-icon.svg' 5 | 6 | class ErrorBoundary extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { hasError: false }; 10 | } 11 | 12 | static getDerivedStateFromError(error) { 13 | console.log(error); 14 | 15 | return { 16 | error, 17 | hasError: true 18 | }; 19 | } 20 | 21 | tryAgain = () => { 22 | console.log(this); 23 | this.render() 24 | } 25 | 26 | render() { 27 | if (this.state.hasError) { 28 | return this.props.fallback?.({ 29 | error: this.state.error, 30 | tryAgain: this.tryAgain 31 | }) ||

Something went wrong.

; 32 | } 33 | 34 | return this.props.children; 35 | } 36 | } 37 | 38 | function Container(props) { 39 | const EditLink = () => { 40 | return props.demoID ? 41 | 45 | 46 | Edit in Stackblitz 47 | : null 48 | } 49 | const [swiperInstance, setSwiperInstance] = useState() 50 | const $el = createRef() 51 | const [width, setWidth] = useState(100) 52 | const setSize = useCallback(e => { 53 | setWidth(e.target.value) 54 | setTimeout(() => { 55 | console.log(swiperInstance); 56 | swiperInstance?.breakpoints?.update() 57 | }) 58 | }, [setWidth, swiperInstance]) 59 | const styleSetter = props.setWidth &&
62 | 63 | 64 | 72 |
73 | 74 | useEffect(() => { 75 | const swiper = Swiper($el.current.children[0], { 76 | ...props.option 77 | }) 78 | 79 | setSwiperInstance(swiper) 80 | return () => swiper.destroy() 81 | }, []) 82 | 83 | return
84 | 85 |
91 | {props.children} 92 |
93 | {styleSetter} 94 |
95 | } 96 | 97 | export default function Demo(props) { 98 | return ( 100 |
101 |

This Demo crashed because of error: {error.message}.

102 | 103 |
104 | )}> 105 | 108 | 109 | } -------------------------------------------------------------------------------- /packages/website/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable docusaurus/copyright-header */ 2 | /** 3 | * Any CSS included here will be global. The classic template 4 | * bundles Infima by default. Infima is a CSS framework designed to 5 | * work well for content-centric websites. 6 | */ 7 | @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;600;900&display=swap'); 8 | 9 | /* You can override the default Infima variables here. */ 10 | :root { 11 | --ifm-color-primary: #FF0074; 12 | --ifm-color-primary-dark: #FF0074; 13 | --ifm-color-primary-darker: #FF0074; 14 | --ifm-color-primary-darkest: #FF0074; 15 | --ifm-color-primary-light: #FF0074; 16 | --ifm-color-primary-lighter: #FF0074; 17 | --ifm-color-primary-lightest: #FF0074; 18 | --ifm-code-font-size: 95%; 19 | } 20 | 21 | .docusaurus-highlight-code-line { 22 | background-color: rgb(72, 77, 91); 23 | display: block; 24 | margin: 0 calc(-1 * var(--ifm-pre-padding)); 25 | padding: 0 var(--ifm-pre-padding); 26 | } 27 | 28 | .navbar { 29 | box-shadow: none; 30 | } 31 | 32 | .navbar__title { 33 | font-family: 'Source Sans Pro', sans-serif; 34 | font-weight: 900; 35 | } 36 | 37 | .demo iframe { 38 | display: block; 39 | margin-bottom: 2em; 40 | width: 100%; 41 | height: 400px; 42 | border: none; 43 | border-radius: 10px; 44 | } 45 | -------------------------------------------------------------------------------- /packages/website/src/pages/styles.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | padding-bottom: 4em; 4 | max-width: 700px; 5 | font-family: TsukuARdGothic-Regular, "Helvetica Neue", Arial, sans-serif; 6 | } 7 | 8 | .head { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | margin-top: 133px; 13 | height: 162px; 14 | text-align: center; 15 | } 16 | 17 | .logo { 18 | display: block; 19 | margin-right: 42px; 20 | width: 170px; 21 | height: 162px; 22 | } 23 | 24 | .slogan { 25 | font-family: TsukuARdGothic-Regular, "Helvetica Neue", Arial, sans-serif; 26 | } 27 | 28 | .sloganPc { 29 | display: block; 30 | font-size: 48px; 31 | letter-spacing: 1px; 32 | line-height: 50px; 33 | } 34 | 35 | .sloganMobile { 36 | display: none; 37 | margin-bottom: 10px; 38 | font-size: 28px; 39 | } 40 | 41 | .desc { 42 | margin-top: 44px; 43 | font-size: 20px; 44 | letter-spacing: 0.57px; 45 | text-align: center; 46 | line-height: 30px; 47 | } 48 | 49 | .descMobile { 50 | display: none; 51 | font-size: 18px; 52 | line-height: 24px; 53 | text-align: center; 54 | } 55 | 56 | .btnGroup { 57 | display: flex; 58 | align-items: center; 59 | justify-content: center; 60 | margin: 86px 0; 61 | } 62 | 63 | .button { 64 | display: inline-flex; 65 | align-items: center; 66 | justify-content: center; 67 | width: 182px; 68 | height: 40px; 69 | border: none; 70 | border-radius: 30.5px; 71 | font-family: PingFangSC-Semibold; 72 | font-size: 16px; 73 | letter-spacing: 0.46px; 74 | text-align: center; 75 | cursor: pointer; 76 | } 77 | 78 | .button:hover { 79 | text-decoration: none; 80 | } 81 | 82 | .btnStart { 83 | color: #FFF; 84 | background-image: linear-gradient(149deg, #FF0074, #FF6612); 85 | } 86 | 87 | .btnStart:hover { 88 | color: #FFF; 89 | } 90 | 91 | .btnGithub { 92 | margin-left: 37px; 93 | border: 1px solid #FF5F1A; 94 | color: #FF5F1A; 95 | } 96 | 97 | .btnGithub:hover { 98 | color: #FF5F1A; 99 | } 100 | 101 | .demo p { 102 | margin: 1em 0; 103 | } 104 | 105 | iframe { 106 | width: 100%; 107 | height: 400px; 108 | border: 1px solid #D3D3D3; 109 | border-radius: 5px; 110 | } 111 | 112 | @media screen and (max-width: 700px) { 113 | .container { 114 | width: 100%; 115 | padding: 1rem 2rem; 116 | background: no-repeat url("/img/bg-m.svg") top center/100% auto; 117 | } 118 | 119 | .head { 120 | margin-top: 96px; 121 | height: auto; 122 | flex-direction: column; 123 | } 124 | 125 | .logo { 126 | margin: 0 auto; 127 | width: 120px; 128 | } 129 | 130 | .sloganMobile { 131 | display: block !important; 132 | } 133 | 134 | .sloganPc { 135 | display: none !important; 136 | } 137 | 138 | .desc { 139 | display: none; 140 | } 141 | 142 | .descMobile { 143 | display: block; 144 | } 145 | 146 | .button { 147 | width: 154px; 148 | height: 40px; 149 | font-size: 14px; 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /packages/website/src/pages/styles.module.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | padding-bottom: 4em; 4 | max-width: 700px; 5 | font-family: 'Source Sans Pro', TsukuARdGothic-Regular, "Helvetica Neue", Arial, sans-serif; 6 | } 7 | 8 | .head { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | margin-top: 133px; 13 | height: 162px; 14 | text-align: center; 15 | } 16 | 17 | .logo { 18 | display: block; 19 | margin-right: 42px; 20 | width: 170px; 21 | height: 162px; 22 | } 23 | 24 | .sloganPc { 25 | display: block; 26 | font-size: 48px; 27 | letter-spacing: 1px; 28 | line-height: 56px; 29 | text-align: left; 30 | } 31 | 32 | .sloganMobile { 33 | display: none; 34 | margin-bottom: 10px; 35 | font-size: 28px; 36 | font-weight: 600; 37 | } 38 | 39 | .desc { 40 | margin-top: 44px; 41 | font-size: 20px; 42 | letter-spacing: 0.57px; 43 | text-align: center; 44 | line-height: 30px; 45 | } 46 | 47 | .descMobile { 48 | display: none; 49 | font-size: 18px; 50 | line-height: 24px; 51 | text-align: center; 52 | } 53 | 54 | .btnGroup { 55 | display: flex; 56 | align-items: center; 57 | justify-content: center; 58 | margin: 86px 0; 59 | } 60 | 61 | .button { 62 | display: inline-flex; 63 | align-items: center; 64 | justify-content: center; 65 | width: 182px; 66 | height: 50px; 67 | border: none; 68 | border-radius: 30.5px; 69 | font-family: PingFangSC-Semibold; 70 | font-size: 16px; 71 | letter-spacing: 0.46px; 72 | text-align: center; 73 | cursor: pointer; 74 | 75 | &:hover { 76 | text-decoration: none; 77 | } 78 | } 79 | 80 | .btnStart { 81 | color: #FFF; 82 | background-image: linear-gradient(149deg, #FF0074, #FF6612); 83 | 84 | &:hover { 85 | color: #FFF; 86 | } 87 | } 88 | 89 | .btnGithub { 90 | margin-left: 37px; 91 | border: 1px solid #FF5F1A; 92 | color: #FF5F1A; 93 | 94 | &:hover { 95 | color: #FF5F1A; 96 | } 97 | } 98 | 99 | .demo p { 100 | margin: 1em 0; 101 | } 102 | 103 | iframe { 104 | width: 100%; 105 | height: 400px; 106 | border: 1px solid #D3D3D3; 107 | border-radius: 5px; 108 | } 109 | 110 | @media screen and (max-width: 700px) { 111 | .container { 112 | width: 100%; 113 | padding: 1rem 2rem; 114 | background: no-repeat url("/img/bg-m.svg") top center/100% auto; 115 | } 116 | 117 | .head { 118 | margin-top: 96px; 119 | height: auto; 120 | flex-direction: column; 121 | } 122 | 123 | .logo { 124 | margin: 0 auto; 125 | width: 120px; 126 | } 127 | 128 | .sloganMobile { 129 | display: block !important; 130 | } 131 | 132 | .sloganPc { 133 | display: none !important; 134 | } 135 | 136 | .desc { 137 | display: none; 138 | } 139 | 140 | .descMobile { 141 | display: block; 142 | } 143 | 144 | .button { 145 | width: 154px; 146 | height: 44px; 147 | font-size: 14px; 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /packages/website/src/theme/ReactLiveScope/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React from 'react'; 9 | 10 | // Add react-live imports you need here 11 | const ReactLiveScope = { 12 | React, 13 | ...React, 14 | }; 15 | 16 | export default ReactLiveScope; 17 | -------------------------------------------------------------------------------- /packages/website/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe223/tiny-swiper/aca4f989fa75ec9907b99fcbbfcd10cf99893339/packages/website/static/.nojekyll -------------------------------------------------------------------------------- /packages/website/static/img/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | icon左 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /packages/website/static/img/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | icon左备份 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /packages/website/static/img/bg-m.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 编组 7 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/website/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe223/tiny-swiper/aca4f989fa75ec9907b99fcbbfcd10cf99893339/packages/website/static/img/favicon.ico -------------------------------------------------------------------------------- /packages/website/static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joe223/tiny-swiper/aca4f989fa75ec9907b99fcbbfcd10cf99893339/packages/website/static/img/logo.png -------------------------------------------------------------------------------- /packages/website/static/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | LOGO备份 3 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /packages/website/static/img/stackblitz-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/docusaurus/tsconfig.json", 3 | "include": ["src/"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/website/versioned_docs/version-0.1.x/api.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: api 3 | title: APIs 4 | --- 5 | 6 | 7 | - [Config parameters](#swiper-parameters) 8 | 9 | ## Swiper parameters 10 | 11 | | Parameter | Type | default | Description | 12 | |---|---|---|---| 13 | | direction | string | 'horizontal' | Could be 'horizontal' or 'vertical' (for vertical slider). | 14 | | speed | number | 300 | Duration of transition between slides (in ms) | 15 | | intermittent | number | 0 | Time to suspend between two swip actions. Only for mousewheel mode. | 16 | | initialSlide | number | 0 | Index number of initial slide. | 17 | | spaceBetween | number | 0 | Distance between slides in px. | 18 | | longSwipesMs | number | 300 | Minimal duration (in ms) to trigger swipe to next/previous slide during long swipes | 19 | | longSwipesRatio | number | 0.5 | Ratio to trigger swipe to next/previous slide during long swipes. | 20 | | slidePrevClass | string | 'swiper-slide-prev' | CSS class name of slide which is right before currently active slide | 21 | | slideNextClass | string | 'swiper-slide-next' | CSS class name of slide which is right after currently active slide | 22 | | slideActiveClass | string | 'swiper-slide-active' | CSS class name of currently active slide | 23 | | slideClass | string | 'swiper-slide' | CSS class name of slide | 24 | | wrapperClass | string | 'swiper-wrapper' | CSS class name of slides' wrapper | 25 | | touchRatio | number | 1 | Touch ratio | 26 | | touchAngle | number | 45 | Allowable angle (in degrees) to trigger touch move. Range of values: `[0, 90]`.| 27 | | touchStartPreventDefault | boolean | true | If disabled, `touchstart` (`mousedown`) event won't be prevented | 28 | | touchStartForcePreventDefault | boolean | false | Force to always prevent default for `touchstart` (`mousedown`) event | 29 | | touchMoveStopPropagation | boolean | false | If enabled, then propagation of "touchmove" will be stopped | 30 | | mousewheel | object/boolean | false | Enables navigation through slides using mouse wheel. Object with mousewheel parameters or boolean true to enable with default settings. | 31 | | pagination | object/boolean | false | Object with navigation parameters. | 32 | | passiveListeners | boolean | true | Passive event listeners will be used by default where possible to improve scrolling performance on mobile devices. But if you need to use `e.preventDefault` and you have conflict with it, then you should disable this parameter | 33 | | resistance | boolean | true | Set to false if you want to disable resistant bounds | 34 | | resistanceRatio | number | 0.85 | This option allows you to control resistance ratio | 35 | 36 | ### Mousewheel Control Parameters 37 | 38 | | Parameter | Type | default | Description | 39 | |---|---|---|---| 40 | | sensitivity | number | 1 | Multiplier of mousewheel data, allows to tweak mouse wheel sensitivity | 41 | | invert | boolean | false | Set to true to invert sliding direction | 42 | 43 | ### Pagination Parameters 44 | 45 | | Parameter | Type | default | Description | 46 | |---|---|---|---| 47 | | clickable | boolean | false | If true then clicking on pagination button will cause transition to appropriate slide | 48 | | bulletClass | string | 'swiper-pagination-bullet' | CSS class name of single pagination bullet | 49 | | bulletActiveClass | string | 'swiper-pagination-bullet-active' | CSS class name of currently active pagination bullet | 50 | -------------------------------------------------------------------------------- /packages/website/versioned_docs/version-0.1.x/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: changelog 3 | title: Changelog 4 | --- 5 | 6 | ### v0.1.0 - Released on 2019/10/28 7 | 8 | - Changes: pause scrolling on touch 9 | - Fix: click action stop scrolling while Swiper is scrolling 10 | 11 | ### v0.0.6 - Released on 2019/10/17 12 | 13 | - Fix: `removeClassName` and `addClassName` 14 | 15 | ### v0.0.5 - Released on 2019/10/17 16 | 17 | - Add Swiper parameter `touchAngle` 18 | - Add Swiper parameter `touchMoveStopPropagation` 19 | 20 | ### v0.0.4 - Released on 2019/10/16 21 | 22 | - Add: simulate touch on desktop device 23 | 24 | ### v0.0.3 - Released on 2019/10/16 25 | 26 | - Add: `intermittent` parameter 27 | - Add: `pagination.clickable` configuration 28 | - Add: demo site https://js.org/tiny-swiper 29 | - Changes: default timing function 30 | 31 | ### v0.0.2 - Released on 2019/10/15 32 | 33 | - Add Swiper parameters `longSwipesMs` 34 | - Add Swiper parameters `touchRatio` 35 | - Add Swiper parameters `passiveListeners` 36 | - Add Swiper parameters `resistance` 37 | - Add Swiper parameters `resistanceRatio` 38 | -------------------------------------------------------------------------------- /packages/website/versioned_docs/version-0.1.x/demo.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: demo 3 | title: Demo 4 | --- 5 | 6 |
7 |

Default Setup

8 | 10 |
11 | 12 |
13 |

Pagination

14 |

You need to implement CSS code yourself.

15 | 17 |
18 | 19 |
20 |

Vertical Slider

21 | 23 |
24 | 25 |
26 |

Space Between Slides

27 | 29 |
30 | 31 |
32 |

Mousewheel Control

33 | 35 |
36 | 37 |
38 |

Speed Control

39 | 41 |
42 | 43 |
44 |

Intermittent Control

45 |

Only for mousewheel mode.

46 | 48 |
49 | 50 |
51 |

Resistance Control

52 |

With less resistanceRatio comes bigger resistance.

53 | 55 |
56 | -------------------------------------------------------------------------------- /packages/website/versioned_docs/version-0.1.x/get-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: get-started 3 | title: Get Started 4 | sidebar_label: Get Started 5 | slug: / 6 | --- 7 | 8 | Install Swiper via npm or yarn: 9 | 10 | ```shell 11 | $ npm install tiny-swiper --save 12 | $ yarn add tiny-swiper 13 | ``` 14 | 15 | If you prefer CDN, just make sure constructor `Swiper` is defined in browser global environment. 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | Html code: 22 | 23 | ```html 24 | 25 |
26 | 27 |
28 | 29 |
Slide 1
30 |
Slide 2
31 |
Slide 3
32 | ... 33 |
34 | 35 |
36 |
37 | ``` 38 | 39 | JavaScript/TypeScript code: 40 | 41 | ```javascript 42 | import Swiper, { 43 | SwiperPluginLazyload, 44 | SwiperPluginPagination 45 | } from 'tiny-swiper' 46 | 47 | Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ]) 48 | 49 | const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters) 50 | ``` 51 | 52 | - `new Swiper()` - initialize swiper with options. 53 | - `Swiper.use()` - Register plugin. 54 | - `swiperContainer` - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required. 55 | - `parameters` - object with Swiper parameters. Optional. 56 | 57 | 58 | You also can load full-featured Tiny-Swiper: 59 | 60 | ```javascript 61 | import Swiper from 'tiny-swiper/lib/index.full.js' 62 | ``` 63 | 64 | ```html 65 | 66 | ``` 67 | -------------------------------------------------------------------------------- /packages/website/versioned_docs/version-1.x/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: changelog 3 | title: Changelog 4 | --- 5 | ### v1.3.3 - Released on 2020/12/9 6 | 7 | - Fix: #36 SwiperPluginKeyboardControl exported incorrectly 8 | 9 | ### v1.3.2 - Released on 2020/12/1 10 | 11 | - Fix: #29 Invert mousewheel. 12 | 13 | ### v1.3.1 - Released on 2020/10/30 14 | 15 | - Fix: #27 Calculating the total of pagination bullet with slidesPerView. 16 | 17 | ### v1.3.0 - Released on 2019/12/30 18 | 19 | - Add: `slidesPerView` parameter 20 | - Add: `centeredSlides` parameter 21 | - Add: SwiperPluginKeyboardControl 22 | - Fix: Unexpected slide width (#14) 23 | - Fix: transform boundary 24 | 25 | ### v1.2.0 - Released on 2019/12/16 26 | 27 | - Add: export ESM and full-featured file 28 | 29 | ### v1.1.0 - Released on 2019/12/9 30 | 31 | - Add: `SwiperPluginLazyload` plugin 32 | - Add: use method 33 | 34 | ### v1.0.2 - Released on 2019/11/18 35 | 36 | - Add: excludeElements configuration 37 | - Changes: update resistance calculate 38 | - Changes: optimize package size 39 | 40 | ### v1.0.1 - Released on 2019/11/12 41 | 42 | - Fix: SwiperPluginPagination plugin name 43 | 44 | ### v1.0.0 - Released on 2019/11/11 45 | 46 | - **Breaking Change**: extract pagination plugin 47 | - Add: destory method 48 | - Add: life hooks 49 | 50 | ### v0.1.0 - Released on 2019/10/28 51 | 52 | - Changes: pause scrolling on touch 53 | - Fix: click action stop scrolling while Swiper is scrolling 54 | 55 | ### v0.0.6 - Released on 2019/10/17 56 | 57 | - Fix: `removeClassName` and `addClassName` 58 | 59 | ### v0.0.5 - Released on 2019/10/17 60 | 61 | - Add Swiper parameter `touchAngle` 62 | - Add Swiper parameter `touchMoveStopPropagation` 63 | 64 | ### v0.0.4 - Released on 2019/10/16 65 | 66 | - Add: simulate touch on desktop device 67 | 68 | ### v0.0.3 - Released on 2019/10/16 69 | 70 | - Add: `intermittent` parameter 71 | - Add: `pagination.clickable` configuration 72 | - Add: demo site https://js.org/tiny-swiper 73 | - Changes: default timing function 74 | 75 | ### v0.0.2 - Released on 2019/10/15 76 | 77 | - Add Swiper parameters `longSwipesMs` 78 | - Add Swiper parameters `touchRatio` 79 | - Add Swiper parameters `passiveListeners` 80 | - Add Swiper parameters `resistance` 81 | - Add Swiper parameters `resistanceRatio` 82 | -------------------------------------------------------------------------------- /packages/website/versioned_docs/version-1.x/demo.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: demo 3 | title: Demo 4 | --- 5 | 6 | 7 | ## Config parameters 8 | 9 |
10 |

Default Setup

11 | 13 |
14 | 15 |
16 |

Vertical Slider

17 | 19 |
20 | 21 |
22 |

Space Between Slides

23 | 25 |
26 | 27 |
28 |

Mousewheel Control

29 | 31 |
32 | 33 |
34 |

Speed Control

35 | 37 |
38 | 39 |
40 |

Intermittent Control

41 |

Only for mousewheel mode.

42 | 44 |
45 | 46 |
47 |

Resistance Control

48 |

With less resistanceRatio comes bigger resistance.

49 | 51 |
52 | 53 | ## Plugins 54 | 55 |
56 |

Pagination

57 |

You need to implement CSS code yourself.

58 | 60 |
61 | 62 |
63 |

Lazyload

64 |

You need to implement CSS code yourself.

65 | 67 |
68 | 69 |
70 |

Keyboard Control

71 |

Using uprightdownleft keys to control swiper instance.

72 |

Keys up and down work only when direction: vertical, 73 | so do rightleft.

74 | 76 |
77 | -------------------------------------------------------------------------------- /packages/website/versioned_docs/version-1.x/get-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: get-started 3 | title: Get Started 4 | sidebar_label: Get Started 5 | slug: / 6 | --- 7 | 8 | Install Swiper via npm or yarn: 9 | 10 | ```shell 11 | $ npm install tiny-swiper --save 12 | $ yarn add tiny-swiper 13 | ``` 14 | 15 | If you prefer CDN, just make sure constructor `Swiper` is defined in browser global environment. 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | Html code: 22 | 23 | ```html 24 | 25 |
26 | 27 |
28 | 29 |
Slide 1
30 |
Slide 2
31 |
Slide 3
32 | ... 33 |
34 | 35 |
36 |
37 | ``` 38 | 39 | JavaScript/TypeScript code: 40 | 41 | ```javascript 42 | import Swiper, { 43 | SwiperPluginLazyload, 44 | SwiperPluginPagination 45 | } from 'tiny-swiper' 46 | 47 | Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ]) 48 | 49 | const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters) 50 | ``` 51 | 52 | - `new Swiper()` - initialize swiper with options. 53 | - `Swiper.use()` - Register plugin. 54 | - `swiperContainer` - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required. 55 | - `parameters` - object with Swiper parameters. Optional. 56 | 57 | 58 | You also can load full-featured Tiny-Swiper: 59 | 60 | ```javascript 61 | import Swiper from 'tiny-swiper/lib/index.full.js' 62 | ``` 63 | 64 | ```html 65 | 66 | ``` 67 | -------------------------------------------------------------------------------- /packages/website/versioned_docs/version-2.x/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: changelog 3 | title: Changelog 4 | --- 5 | 6 | ### v2.1.1 7 | - Add: `SwiperPluginPagination` plugin parameters `renderBullet` and `clickableClass` 8 | 9 | ### v2.1.0 10 | - Add: `SwiperPluginAutoPlay` plugin 11 | 12 | ### v2.0.0 13 | 14 | - Add: `loop` parameter 15 | - Add: `freeMode` parameter 16 | - Update: Remove Mousewheel from core module as an external plugin `SwiperPluginMousewheel`. 17 | 18 | -------------------------------------------------------------------------------- /packages/website/versioned_docs/version-2.x/get-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: get-started 3 | title: Get Started 4 | sidebar_label: Get Started 5 | slug: / 6 | --- 7 | 8 | Install Swiper via npm or yarn: 9 | 10 | ```shell 11 | $ npm install tiny-swiper --save 12 | $ yarn add tiny-swiper 13 | ``` 14 | 15 | If you prefer CDN, just make sure constructor `Swiper` is defined in browser global environment. 16 | 17 | ```html 18 | 19 | ``` 20 | 21 | Html code: 22 | 23 | ```html 24 | 25 |
26 | 27 |
28 | 29 |
Slide 1
30 |
Slide 2
31 |
Slide 3
32 | ... 33 |
34 | 35 |
36 |
37 | ``` 38 | 39 | JavaScript/TypeScript code: 40 | 41 | ```javascript 42 | import Swiper, { 43 | SwiperPluginLazyload, 44 | SwiperPluginPagination 45 | } from 'tiny-swiper' 46 | 47 | Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ]) 48 | 49 | const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters) 50 | ``` 51 | 52 | - `new Swiper()` - initialize swiper with options. 53 | - `Swiper.use()` - Register plugin. 54 | - `swiperContainer` - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required. 55 | - `parameters` - object with Swiper parameters. Optional. 56 | 57 | 58 | You also can load full-featured Tiny-Swiper: 59 | 60 | ```javascript 61 | import Swiper from 'tiny-swiper/lib/index.full.js' 62 | ``` 63 | 64 | ```html 65 | 66 | ``` 67 | -------------------------------------------------------------------------------- /packages/website/versioned_sidebars/version-0.1.x-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "version-0.1.x/someSidebar": [ 3 | { 4 | "collapsed": true, 5 | "type": "category", 6 | "label": "Guide", 7 | "items": [ 8 | { 9 | "type": "doc", 10 | "id": "version-0.1.x/get-started" 11 | }, 12 | { 13 | "type": "doc", 14 | "id": "version-0.1.x/api" 15 | }, 16 | { 17 | "type": "doc", 18 | "id": "version-0.1.x/demo" 19 | } 20 | ] 21 | }, 22 | { 23 | "collapsed": true, 24 | "type": "category", 25 | "label": "Changelog", 26 | "items": [ 27 | { 28 | "type": "doc", 29 | "id": "version-0.1.x/changelog" 30 | } 31 | ] 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /packages/website/versioned_sidebars/version-1.x-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "version-1.x/someSidebar": [ 3 | { 4 | "collapsed": true, 5 | "type": "category", 6 | "label": "Guide", 7 | "items": [ 8 | { 9 | "type": "doc", 10 | "id": "version-1.x/get-started" 11 | }, 12 | { 13 | "type": "doc", 14 | "id": "version-1.x/api" 15 | } 16 | ] 17 | }, 18 | { 19 | "type": "doc", 20 | "id": "version-1.x/demo" 21 | }, 22 | { 23 | "type": "doc", 24 | "id": "version-1.x/changelog" 25 | } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /packages/website/versioned_sidebars/version-2.x-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "version-2.x/someSidebar": [ 3 | { 4 | "collapsed": true, 5 | "type": "category", 6 | "label": "Guide", 7 | "items": [ 8 | { 9 | "type": "doc", 10 | "id": "version-2.x/get-started" 11 | }, 12 | { 13 | "type": "doc", 14 | "id": "version-2.x/api" 15 | } 16 | ] 17 | }, 18 | { 19 | "type": "doc", 20 | "id": "version-2.x/demo" 21 | }, 22 | { 23 | "collapsed": true, 24 | "type": "category", 25 | "label": "APIs", 26 | "items": [] 27 | }, 28 | { 29 | "collapsed": true, 30 | "type": "category", 31 | "label": "Changelog", 32 | "items": [ 33 | { 34 | "type": "doc", 35 | "id": "version-2.x/changelog" 36 | } 37 | ] 38 | } 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /packages/website/versions.json: -------------------------------------------------------------------------------- 1 | [ 2 | "2.x", 3 | "1.x", 4 | "0.1.x" 5 | ] 6 | --------------------------------------------------------------------------------