├── .browserslistrc ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github └── workflows │ ├── deploy-docs.yml │ ├── lint.yml │ ├── release.yml │ └── test-coverage.yml ├── .gitignore ├── .husky ├── .gitignore ├── commit-msg └── pre-commit ├── .npmrc ├── .postcssrc ├── .release-please-manifest.json ├── .stylelintrc.json ├── .textlintrc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── commitlint.config.js ├── jest.config.js ├── package.json ├── packages ├── core │ ├── CHANGELOG.md │ ├── README.md │ ├── mangle.json │ ├── package.json │ ├── src │ │ ├── helpers.ts │ │ ├── index.scss │ │ ├── index.spec.test.ts │ │ ├── index.ts │ │ └── setupAll.ts │ └── tsconfig.json ├── docs │ ├── .vuepress │ │ ├── clientConfigs │ │ │ └── scrollAnchorIntoView.ts │ │ ├── components │ │ │ ├── CanIUseSection.vue │ │ │ ├── ExampleSection.vue │ │ │ ├── Footer.vue │ │ │ ├── HeroSection.vue │ │ │ └── NavLink.vue │ │ ├── config.ts │ │ ├── public │ │ │ ├── android-chrome-192x192.png │ │ │ ├── android-chrome-512x512.png │ │ │ ├── apple-touch-icon.png │ │ │ ├── browserconfig.xml │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── favicon.ico │ │ │ ├── logo.jpg │ │ │ ├── logo.svg │ │ │ ├── mstile-150x150.png │ │ │ ├── safari-pinned-tab.svg │ │ │ └── site.webmanifest │ │ └── styles │ │ │ └── index.scss │ ├── CHANGELOG.md │ ├── api-reference │ │ ├── README.md │ │ ├── core.md │ │ ├── integration-react.md │ │ ├── integration-vue.md │ │ ├── plugin-autoplay.md │ │ ├── plugin-custom-events.md │ │ ├── plugin-mouse-drag.md │ │ └── plugin-scroll-snap-fallback.md │ ├── contribution │ │ └── README.md │ ├── ecosystem │ │ └── README.md │ ├── guide │ │ ├── README.md │ │ ├── installation.md │ │ └── usage.md │ ├── index.md │ └── package.json ├── plugin-autoplay │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.spec.test.ts │ │ └── index.ts │ └── tsconfig.json ├── plugin-custom-events │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.spec.test.ts │ │ └── index.ts │ └── tsconfig.json ├── plugin-mouse-drag │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.scss │ │ ├── index.spec.test.ts │ │ └── index.ts │ └── tsconfig.json ├── plugin-scroll-snap-fallback │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.spec.test.ts │ │ ├── index.ts │ │ ├── useFallback.spec.test.ts │ │ └── useFallback.ts │ └── tsconfig.json ├── react │ ├── .env │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.scss │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── TinyCarousel.tsx │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── reportWebVitals.ts │ │ └── setupTests.ts │ ├── tsconfig.json │ └── tsconfig.umd.json ├── utils │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── dom.spec.test.ts │ │ ├── dom.ts │ │ ├── events.spec.test.ts │ │ ├── events.ts │ │ ├── index.ts │ │ ├── limiters.spec.test.ts │ │ └── limiters.ts │ └── tsconfig.json └── vue │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── jest.config.js │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── TinyCarousel.ts │ ├── main.ts │ └── shims-vue.d.ts │ ├── tests │ └── unit │ │ └── tinyCarousel.spec.ts │ ├── tsconfig.json │ └── vue.config.js ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── release-please-config.json ├── renovate.json ├── src ├── logo.png └── logo.psd └── tsconfig.json /.browserslistrc: -------------------------------------------------------------------------------- 1 | ie >= 9 2 | > 1% -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | **/node_modules 5 | **/dist 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | plugins: [ 4 | '@typescript-eslint', 5 | 'eslint-comments', 6 | 'monorepo', 7 | ], 8 | env: { 9 | es6: true, 10 | node: true, 11 | }, 12 | extends: [ 13 | 'eslint:recommended', 14 | 'plugin:@typescript-eslint/recommended', 15 | 'plugin:jest/recommended', 16 | 'plugin:jest/style', 17 | 'plugin:eslint-comments/recommended' 18 | ], 19 | overrides: [ 20 | { 21 | files: ['**.ts'], 22 | parser: '@typescript-eslint/parser', 23 | parserOptions: { 24 | sourceType: 'module', 25 | project: [ 26 | './tsconfig.json', 27 | './packages/*/tsconfig.json', 28 | ], 29 | tsconfigRootDir: __dirname, 30 | warnOnUnsupportedTypeScriptVersion: false, 31 | EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true, 32 | }, 33 | rules: { 34 | '@typescript-eslint/explicit-module-boundary-types': 'off' 35 | } 36 | }, 37 | { 38 | files: ['**/*.spec.ts'], 39 | plugins: ['jest'], 40 | rules: { 41 | // allow console logs in tools and tests 42 | 'no-console': 'off', 43 | }, 44 | }, 45 | ], 46 | }; 47 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Don't allow people to merge changes to these generated files because the result may be invalid 2 | # You need to run "rush update" again 3 | pnpm-lock.yaml merge=binary 4 | shrinkwrap.yaml merge=binary 5 | npm-shrinkwrap.json merge=binary 6 | yarn.lock merge=binary 7 | -------------------------------------------------------------------------------- /.github/workflows/deploy-docs.yml: -------------------------------------------------------------------------------- 1 | name: Deploy docs 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | build-and-deploy: 8 | if: ${{ github.actor != 'dependabot[bot]' }} 9 | name: Build and deploy docs 10 | runs-on: ubuntu-latest 11 | strategy: 12 | matrix: 13 | node-version: [16] 14 | steps: 15 | - uses: actions/checkout@v3 16 | with: 17 | persist-credentials: false 18 | - uses: pnpm/action-setup@v2.4.0 19 | with: 20 | version: 7 21 | - name: Use Node.js ${{ matrix.node-version }} 22 | uses: actions/setup-node@v3 23 | with: 24 | node-version: ${{ matrix.node-version }} 25 | cache: 'pnpm' 26 | - name: Install dependencies 27 | run: pnpm install 28 | - name: Build packages 🔧 (docs included 📄) 29 | run: pnpm build 30 | - name: Deploy 🚀 31 | uses: JamesIves/github-pages-deploy-action@releases/v3 32 | with: 33 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 34 | BRANCH: gh-pages 35 | FOLDER: packages/docs/.vuepress/dist 36 | CLEAN: true -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | on: 3 | pull_request: 4 | branches: 5 | - master 6 | push: 7 | branches: 8 | - master 9 | jobs: 10 | lint: 11 | name: Lint 12 | runs-on: ubuntu-latest 13 | strategy: 14 | matrix: 15 | node-version: [16] 16 | steps: 17 | - uses: actions/checkout@v3 18 | - uses: pnpm/action-setup@v2.4.0 19 | with: 20 | version: 7 21 | - name: Use Node.js ${{ matrix.node-version }} 22 | uses: actions/setup-node@v3 23 | with: 24 | node-version: ${{ matrix.node-version }} 25 | cache: 'pnpm' 26 | - name: Install dependencies 27 | run: pnpm install 28 | - name: Build packages to get cross-references working 🔧 29 | run: pnpm build 30 | - run: pnpm lint 31 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | release: 8 | name: Release 9 | runs-on: ubuntu-latest 10 | strategy: 11 | matrix: 12 | node-version: [16] 13 | steps: 14 | - uses: google-github-actions/release-please-action@v3.7.11 15 | id: release 16 | with: 17 | command: manifest 18 | token: '${{secrets.GITHUB_TOKEN}}' 19 | default-branch: master 20 | monorepo-tags: true 21 | - name: Checkout Repository 22 | if: ${{ steps.release.outputs.releases_created }} 23 | uses: actions/checkout@v3 24 | - name: Setup npmrc 25 | run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc 26 | - uses: pnpm/action-setup@v2.4.0 27 | if: ${{ steps.release.outputs.releases_created }} 28 | with: 29 | version: 7 30 | - name: Use Node.js ${{ matrix.node-version }} 31 | if: ${{ steps.release.outputs.releases_created }} 32 | uses: actions/setup-node@v3 33 | with: 34 | node-version: ${{ matrix.node-version }} 35 | cache: 'pnpm' 36 | registry-url: 'https://registry.npmjs.org' 37 | - name: Install dependencies 38 | if: ${{ steps.release.outputs.releases_created }} 39 | run: pnpm install 40 | - name: Build packages to get cross-references working 🔧 41 | if: ${{ steps.release.outputs.releases_created }} 42 | run: pnpm build 43 | - name: Release package 44 | if: ${{ steps.release.outputs.releases_created }} 45 | run: pnpm release:ci 46 | -------------------------------------------------------------------------------- /.github/workflows/test-coverage.yml: -------------------------------------------------------------------------------- 1 | name: Test coverage 2 | on: 3 | pull_request: 4 | branches: 5 | - master 6 | push: 7 | branches: 8 | - master 9 | jobs: 10 | test-coverage: 11 | name: Test coverage 12 | runs-on: ubuntu-latest 13 | strategy: 14 | matrix: 15 | node-version: [16] 16 | steps: 17 | - uses: actions/checkout@v3 18 | - uses: pnpm/action-setup@v2.4.0 19 | with: 20 | version: 7 21 | - name: Use Node.js ${{ matrix.node-version }} 22 | uses: actions/setup-node@v3 23 | with: 24 | node-version: ${{ matrix.node-version }} 25 | cache: 'pnpm' 26 | - name: Install dependencies 27 | run: pnpm install 28 | - name: Build packages to get cross-references working 🔧 29 | run: pnpm build 30 | - run: pnpm coverage 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .cache 4 | report.html 5 | .nyc_output 6 | .vscode 7 | .yarn 8 | dist 9 | coverage 10 | 11 | # local env files 12 | .env.local 13 | .env.*.local 14 | 15 | # Log files 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | pnpm-debug.log* 20 | 21 | # Editor directories and files 22 | .idea 23 | .vscode 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | # Vuepress 31 | **/.vuepress/.temp 32 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm commitlint --edit "$1" 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm lint 5 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true 2 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "postcss-import" : { 4 | }, 5 | "postcss-reporter": { 6 | "clearReportedMessages": true 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.release-please-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages/core": "0.10.2", 3 | "packages/docs": "0.7.1", 4 | "packages/plugin-autoplay": "0.4.5", 5 | "packages/plugin-custom-events": "0.4.5", 6 | "packages/plugin-mouse-drag": "0.4.3", 7 | "packages/plugin-scroll-snap-fallback": "0.3.2", 8 | "packages/react": "0.3.10", 9 | "packages/utils": "0.6.0", 10 | "packages/vue": "0.7.2" 11 | } 12 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-sass-guidelines" 3 | } 4 | -------------------------------------------------------------------------------- /.textlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "filters": { 3 | "comments": true 4 | }, 5 | "rules": { 6 | "@textlint-rule/no-unmatched-pair": true, 7 | "abbr-within-parentheses": true, 8 | "alex": { 9 | "allow": ["master"] 10 | }, 11 | "apostrophe": true, 12 | "common-misspellings": { 13 | "ignore": [] 14 | }, 15 | "en-capitalization": true, 16 | "no-empty-section": true, 17 | "no-start-duplicated-conjunction": true, 18 | "no-todo": false, 19 | "period-in-list-item": true, 20 | "spelling": { 21 | "language": "en", 22 | "skipPatterns": [ 23 | "/\\b(?:SASS|camelCased|npm|isn’t|reinitialization|typings|Integrations|Deregisters|minifies|pluggable|scrollbars?|mousemove|JavaScript|autoplay|Node\\.js|Autoplay|lifecycle|CustomEvents?|polyfill|Config|PluginDefinition|interface|getter|Getter|defaultConfig|doesn’t|TinyCarousel|carouselElement|CarouselElement|I18n|Vue|W3C|CDN|TODO|frsource|FRSOURCE|Freisler|FRS|changelogs|Jakub|v1|vanillaJS|customizable|polyfills|performant|2020|2021)\\b/g", 24 | "/\\bchangelog\\b/i", 25 | "/(?:\\s|^):[a-z]+:(?:\\s|$)/ig", 26 | "/(?:\\s|^)https:\/\/[^\\s]+\/(?:\\s|$)/ig", 27 | "/(?:\\s|^)<[a-z].*>?(?:\\s|$)/ig", 28 | "/\\b(?:’ve)\\b/i" 29 | ] 30 | }, 31 | "stop-words": true, 32 | "terminology": true, 33 | "unexpanded-acronym": { 34 | "ignore_acronyms" : ["CSS", "SASS", "TODO", "API", "MIT", "FRS", "HTML"] 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/CHANGELOG.md -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # TinyCarousel Contributing Guide 2 | 3 | Hey! It’s really exciting for us to see your interest in contributing to TinyCarousel. Before taking off with your work, please take a moment to read through these guidelines: 4 | 5 | - [Code of Conduct](https://github.com/FRSOURCE/tiny-carousel/blob/master/CODE_OF_CONDUCT.md) 6 | - [Questions?](#questions) 7 | - [Reporting an issue or a feature request](#reporing-an-issue-or-a-feature-request) 8 | - [Pull Request Guidelines](#pull-request-guidelines) 9 | - [Development Setup](#development-setup) 10 | 11 | ## Questions? 12 | 13 | Don’t hesitate to ask a question directly on the [discussions board](https://github.com/FRSOURCE/tiny-carousel/discussions)! 14 | 15 | ## Reporting an issue or a feature request 16 | 17 | - Please always use GitHub Issues tracker with [appropriate template](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2FFRSOURCE%2Ftiny-carousel%2Fissues%2Fnew%2Fchoose) to create a new issue or suggestion 18 | 19 | ## Pull Request Guidelines 20 | 21 | - Check if there isn’t a similar PR already in the [GitHub Pull requests](https://github.com/FRSOURCE/tiny-carousel/pulls) - maybe somebody already has covered this topic? 22 | 23 | - Checkout the master branch and (after you do your work) file a PR against it 24 | 25 | - Read through the [development setup](#development-setup) to learn how to work with this project. Always make sure that `pnpm lint`, `pnpm coverage` pass 26 | 27 | - Please use [conventional commits v1.0.0 style guide](https://www.conventionalcommits.org/en/v1.0.0/) for commits and PR names 28 | 29 | - We have no preference about number of commits on the PR - they will be all squashed by GitHub while merging 30 | 31 | - When creating a new feature/plugin/integration: 32 | - Make sure the feature is covered by tests 33 | - Provide a meaningful description. In most cases it would make sens to first open a issue with a suggestion, discuss about it and have it approved before working on it 34 | 35 | - When fixing bug: 36 | - Try to cover the scenario with tests if possible 37 | - If an issue for this bug already exists, please reference it via (`Refs: #XYZ` - where `XYZ` is an issue number) at the very bottom of your commit message and PR description as proposed by [conventional commits v1.0.0 style guide](https://www.conventionalcommits.org/en/v1.0.0/#commit-message-with-multi-paragraph-body-and-multiple-footers) 38 | - If there is no issue connected with the bug, please provide a detailed description of the problem in the PR. Live demo preferred ([look for the codeine example project in the bug issue template](https://github.com/FRSOURCE/tiny-carousel/blob/master/.github/ISSUE_TEMPLATE/bug_report.md)) 39 | 40 | ## Development Setup 41 | 42 | 43 | You will need [Node.js](https://nodejs.org/en/) **version 16+** and [pnpm](https://pnpm.io/installation). 44 | 45 | 46 | After cloning the repository, run: 47 | 48 | ``` bash 49 | $ pnpm i # installs the project dependencies (for all of the nested packages) 50 | ``` 51 | 52 | ### Committing Changes 53 | 54 | Commit messages should follow the [conventional commits v1.0.0](https://www.conventionalcommits.org/en/v1.0.0/) so that changelogs can be automatically generated. Commit messages will be automatically validated upon commit. 55 | 56 | ### These npm scripts are available in every package and in the project root 57 | 58 | When fired in the project root they will run corresponding actions in every nested package at once. 59 | 60 | ``` bash 61 | # watches and rebuilds the package in development version 62 | $ pnpm start 63 | 64 | # run tests once 65 | $ pnpm test 66 | 67 | # watch & run tests on every file change 68 | $ pnpm watch:test 69 | 70 | # run tests and collect coverage 71 | $ pnpm coverage 72 | 73 | # lint & try to autofix linting errors 74 | $ pnpm fix:lint 75 | 76 | # lint files 77 | $ pnpm lint 78 | 79 | # build the project for NPM 80 | $ pnpm build 81 | ``` 82 | 83 | There are some other scripts available in the `scripts` section of the `package.json` file. 84 | 85 | ## Credits 86 | 87 | Many thanks to all the people who have already contributed to TinyCarousel! ❤️ 88 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 FRSOURCE 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | NPM version badge 4 | 5 | 6 | Core bundle size badge. Data from bundlephobia.com 7 | 8 | 9 | Tree shaking supported 10 | 11 | 12 | semantic-relase badge 13 | 14 | 15 | license MIT badge 16 | 17 | 18 | GitHub documentation deployment status badge 19 | 20 |

21 | 22 |

Tiny carousel - your favourite carousel library 👑

23 | 24 |

25 | Getting Started 26 | · 27 | Contribution 28 | · 29 | Documentation 30 | · 31 | File an Issue 32 | · 33 | Have a question or an idea? 34 |
35 |

36 | 37 |

38 |
39 | An extendable library for providing any kind of carousel/slider UI experience. 40 |
Mobile & desktop-friendly 41 |
Tiny & performant - takes advantage of CSS snap points. 42 |
Published as treeshakeable bundles, separate for JS ES5 or modern browsers thanks to microbundle. 43 |
Written completely in typescript.
44 |
45 |
46 |

47 | 48 | 49 |

50 | Tiny carousel library logo 51 |
52 | www.frsource.org/tiny-carousel 53 |
54 |
55 |

56 | 57 | 58 | ## Documentation 59 | 60 | For docs, please visit [frsource.org/tiny-carousel](https://www.frsource.org/tiny-carousel/) 61 | 62 | - [Getting Started](https://www.frsource.org/tiny-carousel/guide/) 63 | - [API Reference](https://www.frsource.org/tiny-carousel/api-reference/) 64 | - [Ecosystem & plugins](https://www.frsource.org/tiny-carousel/ecosystem/) 65 | 66 | ## Quick start 67 | 68 | [Read the guide on how to get started!](https://www.frsource.org/tiny-carousel/guide/) 69 | 70 | ## Questions 71 | 72 | Don’t hesitate to ask a question directly on the [discussions board](https://github.com/FRSOURCE/tiny-carousel/discussions)! 73 | 74 | ## Changelog 75 | 76 | Changes for every release are documented in the [release notes](https://github.com/FRSOURCE/tiny-carousel/releases) and [CHANGELOG files of every package](https://github.com/FRSOURCE/tiny-carousel/tree/master/packages). 77 | 78 | ## License 79 | 80 | [MIT](https://opensource.org/licenses/MIT) 81 | 82 | Copyright (c) 2020-present, Jakub FRS Freisler, FRSOURCE 83 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["@commitlint/config-conventional"] 3 | }; 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | 2 | // eslint-disable-next-line @typescript-eslint/no-var-requires 3 | const { defaults } = require('jest-config'); 4 | 5 | module.exports = { 6 | preset: 'ts-jest', 7 | coveragePathIgnorePatterns: [ 8 | ...defaults.coveragePathIgnorePatterns, 9 | '/dist/' 10 | ], 11 | coverageThreshold: { 12 | global: { 13 | branches: 100, 14 | functions: 100, 15 | lines: 100, 16 | statements: 100 17 | } 18 | }, 19 | testEnvironment: 'jsdom', 20 | moduleNameMapper: { 21 | '^.+\\.(css|scss)$': 'identity-obj-proxy' 22 | } 23 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "@frsource/tiny-carousel", 4 | "version": "0.0.0", 5 | "description": "Mobile & desktop-friendly, tiny, efficient (vanilaJS) carousel which takes advantage of CSS snap points (or polyfills it)!", 6 | "author": "Jakub Freisler ", 7 | "license": "MIT", 8 | "packageManager": "pnpm@7.33.6", 9 | "scripts": { 10 | "release": "pnpm -r publish", 11 | "release:ci": "pnpm release", 12 | "release:test": "pnpm release:ci --dry-run --no-git-checks", 13 | "start": "pnpm -r --parallel --stream start", 14 | "build": "pnpm -r build", 15 | "test": "pnpm -r --parallel test", 16 | "watch:test": "pnpm -r --parallel --stream watch:test", 17 | "coverage": "pnpm -r --parallel coverage", 18 | "lint": "concurrently 'pnpm -r --parallel lint' 'pnpm lint:text'", 19 | "lint:text": "textlint CODE_OF_CONDUCT.md CONTRIBUTING.md README.md packages/*/README.md", 20 | "fix:lint": "concurrently 'pnpm -r --parallel fix:lint' 'pnpm lint:text --fix'", 21 | "prepare": "husky install" 22 | }, 23 | "keywords": [ 24 | "carousel", 25 | "css", 26 | "js", 27 | "efficient", 28 | "accessibility", 29 | "lightweight", 30 | "snap points", 31 | "CSS snap", 32 | "snapping points", 33 | "simple", 34 | "vanillaJS" 35 | ], 36 | "homepage": "https://www.frsource.org/tiny-carousel/", 37 | "repository": { 38 | "type": "git", 39 | "url": "git+https://github.com/FRSource/tiny-carousel.git" 40 | }, 41 | "bugs": { 42 | "url": "https://github.com/FRSource/tiny-carousel/issues" 43 | }, 44 | "devDependencies": { 45 | "@commitlint/cli": "17.7.1", 46 | "@commitlint/config-conventional": "17.7.0", 47 | "@textlint-rule/textlint-rule-no-unmatched-pair": "1.0.8", 48 | "@types/jest": "27.5.2", 49 | "@typescript-eslint/eslint-plugin": "5.62.0", 50 | "@typescript-eslint/parser": "5.62.0", 51 | "concurrently": "7.6.0", 52 | "coveralls": "3.1.1", 53 | "cpy-cli": "4.2.0", 54 | "dictionary-en": "3.2.0", 55 | "eslint": "8.49.0", 56 | "eslint-plugin-eslint-comments": "3.2.0", 57 | "eslint-plugin-jest": "26.9.0", 58 | "eslint-plugin-monorepo": "0.3.2", 59 | "husky": "8.0.1", 60 | "identity-obj-proxy": "3.0.0", 61 | "jest": "27.5.1", 62 | "microbundle": "0.15.0", 63 | "postcss-import": "14.1.0", 64 | "postcss-reporter": "7.0.5", 65 | "rimraf": "3.0.2", 66 | "sass": "1.66.1", 67 | "stylelint": "15.10.3", 68 | "stylelint-config-sass-guidelines": "9.0.1", 69 | "textlint": "12.6.1", 70 | "textlint-filter-rule-comments": "1.2.2", 71 | "textlint-rule-abbr-within-parentheses": "1.0.2", 72 | "textlint-rule-alex": "3.0.0", 73 | "textlint-rule-apostrophe": "2.0.0", 74 | "textlint-rule-common-misspellings": "1.0.1", 75 | "textlint-rule-en-capitalization": "2.0.3", 76 | "textlint-rule-no-empty-section": "1.1.0", 77 | "textlint-rule-no-start-duplicated-conjunction": "2.0.2", 78 | "textlint-rule-no-todo": "2.0.1", 79 | "textlint-rule-period-in-list-item": "0.3.2", 80 | "textlint-rule-spelling": "0.3.0", 81 | "textlint-rule-stop-words": "3.0.1", 82 | "textlint-rule-terminology": "3.0.2", 83 | "textlint-rule-unexpanded-acronym": "1.2.4", 84 | "ts-jest": "27.1.5", 85 | "typescript": "4.9.5" 86 | }, 87 | "workspaces": { 88 | "packages": [ 89 | "packages/*" 90 | ], 91 | "nohoist": [ 92 | "**/@vuepress", 93 | "**/@vuepress/**", 94 | "**/vuepress", 95 | "**/vuepress/**", 96 | "**/vuepress-*", 97 | "**/vuepress-*/**", 98 | "**/jest", 99 | "jest", 100 | "@vue/cli-plugin-unit-jest", 101 | "@vue/cli-plugin-unit-jest/**", 102 | "**/@vue/cli-plugin-unit-jest", 103 | "**/@vue/cli-plugin-unit-jest/**" 104 | ] 105 | }, 106 | "commitlint": { 107 | "extends": [ 108 | "@commitlint/config-conventional" 109 | ] 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /packages/core/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | NPM version badge 4 | 5 | 6 | Core bundle size badge. Data from bundlephobia.com 7 | 8 | 9 | Tree shaking supported 10 | 11 | 12 | semantic-relase badge 13 | 14 | 15 | license MIT badge 16 | 17 |

18 | 19 |

Core module for @frsource/tiny-carousel, based on CSS scroll snap feature 🚀

20 | 21 |

22 | Usage guide 23 | · 24 | API Reference 25 | · 26 | Contribution 27 | · 28 | File an Issue 29 | · 30 | Have a question or an idea? 31 |
32 |

33 | 34 |

35 |
36 | The main package of the Tiny Carousel ecosystem which gives the most basic carousel API. 37 |
Takes advantage of CSS snap points.
38 |
39 |
40 |

41 | 42 | 43 |

44 | Tiny carousel library logo 45 |
46 | www.frsource.org/tiny-carousel 47 |
48 |
49 |

50 | 51 | 52 | ## Documentation 53 | 54 | For docs, please visit [frsource.org/tiny-carousel](https://www.frsource.org/tiny-carousel/) 55 | 56 | - [Getting Started](https://www.frsource.org/tiny-carousel/guide/usage/#core) 57 | - [API Reference](https://www.frsource.org/tiny-carousel/api-reference/core/) 58 | - [Ecosystem & plugins](https://www.frsource.org/tiny-carousel/ecosystem/) 59 | 60 | ## Questions 61 | 62 | Don’t hesitate to ask a question directly on the [discussions board](https://github.com/FRSOURCE/tiny-carousel/discussions)! 63 | 64 | ## Changelog 65 | 66 | Changes for every release are documented in the [release notes](https://github.com/FRSOURCE/tiny-carousel/releases) and [CHANGELOG](https://github.com/FRSOURCE/tiny-carousel/blob/master/packages/core/CHANGELOG.md). 67 | 68 | ## License 69 | 70 | [MIT](https://opensource.org/licenses/MIT) 71 | 72 | Copyright (c) 2020-present, Jakub FRS Freisler, FRSOURCE 73 | -------------------------------------------------------------------------------- /packages/core/mangle.json: -------------------------------------------------------------------------------- 1 | { 2 | "minify": { 3 | "mangle": { 4 | "properties": { 5 | "regex": "^_" 6 | } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /packages/core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@frsource/tiny-carousel-core", 3 | "amdName": "tinyCarouselCore", 4 | "version": "0.10.2", 5 | "description": "Core module for @frsource/tiny-carousel, based on CSS scroll snap feature 🚀", 6 | "source": "src/index.ts", 7 | "types": "dist/index.d.ts", 8 | "main": "dist/index.js", 9 | "umd:main": "dist/index.umd.js", 10 | "unpkg": "dist/index.umd.js", 11 | "module": "dist/index.module.js", 12 | "exports": "./dist/index.modern.js", 13 | "sass": "src/index.scss", 14 | "styles": "dist/index.css", 15 | "scripts": { 16 | "lint": "concurrently pnpm:lint:*", 17 | "lint:scripts": "eslint src/. --ext .js,.jsx,.ts,.tsx", 18 | "lint:styles": "stylelint 'src/**.scss'", 19 | "fix:lint": "concurrently 'pnpm lint:scripts --fix' 'pnpm lint:styles --fix'", 20 | "test": "concurrently pnpm:test:*", 21 | "test:scripts:unit": "jest --config ../../jest.config.js 'core/src/.*\\.spec\\.test\\.ts'", 22 | "coverage": "concurrently pnpm:coverage:*", 23 | "coverage:scripts": "pnpm test:scripts:unit --coverage", 24 | "watch:test": "concurrently pnpm:watch:test:*", 25 | "watch:test:scripts:unit": "pnpm test:scripts:unit --watch", 26 | "build": "microbundle", 27 | "start": "microbundle watch" 28 | }, 29 | "keywords": [ 30 | "carousel", 31 | "slider", 32 | "swiper", 33 | "tiny", 34 | "core", 35 | "efficient", 36 | "modular", 37 | "lightweight", 38 | "mobile-friendly", 39 | "css snap", 40 | "scroll snap", 41 | "snapping points", 42 | "vanillaJS", 43 | "accessibility", 44 | "css", 45 | "js" 46 | ], 47 | "author": "Jakub Freisler ", 48 | "license": "MIT", 49 | "bugs": { 50 | "url": "https://github.com/FRSource/tiny-carousel/issues" 51 | }, 52 | "repository": { 53 | "type": "git", 54 | "url": "git+https://github.com/FRSource/tiny-carousel.git" 55 | }, 56 | "homepage": "https://www.frsource.org/tiny-carousel/ecosystem/#core", 57 | "publishConfig": { 58 | "access": "public" 59 | }, 60 | "dependencies": { 61 | "@frsource/tiny-carousel-utils": "^0.6.0" 62 | }, 63 | "peerDependencies": { 64 | "@frsource/frs-hide-scrollbar": "^2.0.5" 65 | }, 66 | "devDependencies": { 67 | "@frsource/frs-hide-scrollbar": "2.0.7" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /packages/core/src/helpers.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/ban-types 2 | export type DeepPartial = T extends Function ? T : (T extends object ? { [P in keyof T]?: DeepPartial; } : T); 3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 4 | export type OmitFirstItem = F extends [_: any, ...args: infer P] ? P : never; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 6 | export type OmitFirstArg any> = (..._: OmitFirstItem>)=> ReturnType 7 | -------------------------------------------------------------------------------- /packages/core/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@frsource/frs-hide-scrollbar'; 2 | 3 | /** 4 | * To be changed together with `className` core variable 5 | * More info: https://www.frsource.org/tiny-carousel/api-reference/core/#config 6 | */ 7 | $frs-tc-class-name: 'frs-tc' !default; 8 | /** 9 | * To be changed together with `classNameOverflow` core variable 10 | * More info: https://www.frsource.org/tiny-carousel/api-reference/core/#config 11 | */ 12 | $frs-tc-class-name-overflow: 'frs-tc--o' !default; 13 | /** 14 | * To be changed together with `itemClassName` core variable 15 | * More info: https://www.frsource.org/tiny-carousel/api-reference/core/#config 16 | */ 17 | $frs-tc-item-class-name: 'frs-tc-item' !default; 18 | 19 | .#{$frs-tc-class-name} { 20 | display: flex; 21 | height: 100%; 22 | overflow: scroll; 23 | 24 | -webkit-overflow-scrolling: touch; 25 | 26 | scroll-behavior: smooth; 27 | scroll-snap-destination: 0% 100%; 28 | scroll-snap-points-x: repeat(100%); 29 | scroll-snap-type: mandatory; 30 | width: 100%; 31 | 32 | @media (prefers-reduced-motion: reduce) { 33 | scroll-behavior: auto; 34 | } 35 | 36 | @supports (scroll-snap-align: start) { 37 | /* modern scroll snap points */ 38 | scroll-snap-type: x mandatory; 39 | } 40 | } 41 | 42 | .#{$frs-tc-class-name-overflow} { 43 | &::before, 44 | &::after { 45 | content: ''; 46 | } 47 | } 48 | 49 | .#{$frs-tc-class-name-overflow}::before, 50 | .#{$frs-tc-class-name-overflow}::after, 51 | .#{$frs-tc-item-class-name} { 52 | flex: 0 0 100%; 53 | overflow: hidden; 54 | scroll-snap-align: start; 55 | width: 100%; 56 | 57 | @supports (scroll-snap-align: start) { 58 | /* modern scroll snap points */ 59 | scroll-snap-align: center; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /packages/core/src/setupAll.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from '.'; 2 | import { TinyCarousel } from '.'; 3 | 4 | export const setupAll = (_elements: NodeListOf, config: Config | Config[]) => { 5 | const elements = Array.from(_elements); 6 | 7 | return Array.isArray(config) 8 | ? elements.map((element, i) => new TinyCarousel(element, config[i])) 9 | : elements.map(element => new TinyCarousel(element, config)); 10 | } 11 | -------------------------------------------------------------------------------- /packages/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": [ 4 | "**/*" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/clientConfigs/scrollAnchorIntoView.ts: -------------------------------------------------------------------------------- 1 | import { defineClientConfig } from '@vuepress/client'; 2 | import { watch, onMounted } from 'vue'; 3 | import { useRoute } from 'vue-router'; 4 | 5 | const scrollToElementAfterTimeout = (selector, timeout) => { 6 | setTimeout(() => { 7 | if (selector) { 8 | const element = document.querySelector(selector); 9 | 10 | if (element && element.scrollIntoView) { 11 | element.scrollIntoView(); 12 | } 13 | } 14 | }, timeout); 15 | }; 16 | 17 | export default defineClientConfig({ 18 | setup(){ 19 | const route = useRoute() 20 | 21 | watch(route, function() { 22 | scrollToElementAfterTimeout('.sidebar-sub-headers .sidebar-link.active', 0); 23 | }); 24 | onMounted(() => { 25 | scrollToElementAfterTimeout(route.hash, 800); 26 | scrollToElementAfterTimeout('.sidebar-sub-headers .sidebar-link.active', 800); 27 | }); 28 | }, 29 | }); 30 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/components/CanIUseSection.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 32 | 33 | 39 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/components/ExampleSection.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 98 | 99 | 110 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/components/HeroSection.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 30 | 31 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/components/NavLink.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/config.ts: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const { defaultTheme } = require('@vuepress/theme-default'); 3 | const { path } = require('@vuepress/utils'); 4 | const { pwaPlugin } = require('@vuepress/plugin-pwa'); 5 | const { pwaPopupPlugin } = require('@vuepress/plugin-pwa-popup'); 6 | const seoPlugin = require('vuepress-plugin-seo'); 7 | const { registerComponentsPlugin } = require('@vuepress/plugin-register-components'); 8 | const { viteBundler } = require('vuepress'); 9 | const { docsearchPlugin } = require('@vuepress/plugin-docsearch'); 10 | 11 | const indexRE = /(^|.*\/)(index|readme)\.(md|vue)$/i; 12 | const isIndexFile = (file: string) => indexRE.test(file); 13 | 14 | module.exports = { 15 | title: 'Tiny carousel', 16 | description: 'Mobile & desktop-friendly, tiny, efficient (vanilaJS) carousel which takes advantage of CSS snap points (or polyfills it)!', 17 | base: '/tiny-carousel/', 18 | pagePatterns: ['**/*.md', '!.vuepress', '!node_modules', '!CHANGELOG.md'], 19 | theme: defaultTheme({ 20 | home: '/', 21 | logo: '/logo.svg', 22 | repo: 'frsource/tiny-carousel', 23 | navbar: [ 24 | { 25 | text: 'Documentation', 26 | ariaLabel: 'Documentation Menu', 27 | children: [ 28 | { text: 'Guide', link: '/guide/' }, 29 | { text: 'Api reference', link: '/api-reference/' }, 30 | { text: 'Ecosystem', link: '/ecosystem/' } 31 | ] 32 | }, 33 | { text: 'Contribution', link: '/contribution/' }, 34 | { text: 'Looking for Web wizards?', link: 'https://www.frsource.org/' } 35 | ], 36 | sidebarDepth: 4, 37 | sidebar: getSideBar(), 38 | editLink: true, 39 | editLinkText: 'Help us improve this page on GitHub', 40 | docsDir: 'packages/docs', 41 | }), 42 | head: [ 43 | ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com/' }], 44 | ['link', { as: 'style', href: 'https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap' }], 45 | ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap' }], 46 | ['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }], 47 | ['link', { rel: 'alternate icon', sizes: '32x32', href: '/favicon-32x32.png?v=2', type: 'image/png' }], 48 | ['link', { rel: 'alternate icon', sizes: '16x16', href: '/favicon-16x16.png?v=2', type: 'image/png' }], 49 | ['link', { rel: 'manifest', href: '/site.webmanifest?v=2' }], 50 | ['meta', { name: 'theme-color', content: '#ffffff' }], 51 | ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], 52 | ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'white' }], 53 | ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png?v=2' }], 54 | ['link', { rel: 'mask-icon', href: '/safari-pinned-tab.svg?v=2', color: '#f150a0' }], 55 | ['meta', { name: 'msapplication-TileColor', content: '#f150a0' }] 56 | ], 57 | markdown: { 58 | extractHeaders: ['h2', 'h3', 'h4', 'h5'], 59 | }, 60 | plugins: [ 61 | docsearchPlugin({ 62 | appId: 'PEZPH70M28', 63 | apiKey: 'f3397cee543a54ea756174589de9dc60', 64 | indexName: 'tiny-carousel', 65 | }), 66 | registerComponentsPlugin({ 67 | componentsDir: path.resolve(__dirname, './components'), 68 | }), 69 | // [ 70 | // 'vuepress-plugin-clean-urls', 71 | // { 72 | // normalSuffix: '/', 73 | // indexSuffix: '/', 74 | // notFoundPath: '/404.html', 75 | // }, 76 | // ], 77 | () => seoPlugin({ 78 | title: ($page, $site) => $page.path === '/' ? $site.title : $page.title, 79 | description: ($page, $site) => $page.frontmatter.description || $site.description, 80 | type: $page => $page.path === '/' ? 'website' : 'article', 81 | image: ($page, $site) => { 82 | const image = $page.frontmatter.image || $site.themeConfig.image; 83 | return image && ((!image.startsWith('http') && $site.themeConfig.domain || '') + image) 84 | } 85 | }), 86 | () => ({ 87 | name: 'scroll-anchor-into-view-plugin', 88 | clientConfigFile: path.resolve(__dirname, 'clientConfigs', 'scrollAnchorIntoView.ts') 89 | }), 90 | pwaPlugin(), 91 | pwaPopupPlugin({ 92 | '/': { 93 | message: 'New content is available.', 94 | buttonText: 'Refresh', 95 | }, 96 | }) 97 | ], 98 | bundler: viteBundler({ 99 | vuePluginOptions: { 100 | template: { 101 | compilerOptions: { 102 | whitespace: 'preserve', 103 | }, 104 | }, 105 | }, 106 | }), 107 | } 108 | 109 | function getSideBar() { 110 | const ignoreDirs = ['.vuepress', 'node_modules']; 111 | 112 | return fs 113 | .readdirSync(path.join(__dirname, '..'), { withFileTypes: true }) 114 | .filter(item => 115 | item.isDirectory() && 116 | !ignoreDirs.includes(item.name.toLowerCase()) 117 | ) 118 | .reverse() 119 | .reduce((p, { name }) => { 120 | p['/' + name + '/'] = 121 | fs.readdirSync(path.join(__dirname, '..', name), { withFileTypes: true }) 122 | .reduce((p, item) => { 123 | if (item.isFile() && !isIndexFile(item.name)) { 124 | p.push(path.sep + path.join(name, item.name)); 125 | } 126 | return p; 127 | }, [path.sep + path.join(name, 'README.md')]); 128 | return p; 129 | }, {}) 130 | } 131 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/packages/docs/.vuepress/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/packages/docs/.vuepress/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/packages/docs/.vuepress/public/apple-touch-icon.png -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #f150a0 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/packages/docs/.vuepress/public/favicon-16x16.png -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/packages/docs/.vuepress/public/favicon-32x32.png -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/packages/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/packages/docs/.vuepress/public/logo.jpg -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FRSOURCE/tiny-carousel/57e6edb1c8ba4431e60b24e14de7e25f47830bf8/packages/docs/.vuepress/public/mstile-150x150.png -------------------------------------------------------------------------------- /packages/docs/.vuepress/public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Tiny Carousel", 3 | "short_name": "Tiny Carousel", 4 | "description": "Mobile & desktop-friendly, tiny, efficient (vanilaJS) carousel which takes advantage of CSS snap points (or polyfills it)!", 5 | "icons": [ 6 | { 7 | "src": "/android-chrome-192x192.png?v=2", 8 | "sizes": "192x192", 9 | "type": "image/png" 10 | }, 11 | { 12 | "src": "/android-chrome-512x512.png?v=2", 13 | "sizes": "512x512", 14 | "type": "image/png" 15 | } 16 | ], 17 | "theme_color": "#ffffff", 18 | "background_color": "#ffffff", 19 | "display": "standalone" 20 | } 21 | -------------------------------------------------------------------------------- /packages/docs/.vuepress/styles/index.scss: -------------------------------------------------------------------------------- 1 | $accentColor: rgb(241, 80, 160); 2 | $borderColor: rgb(230, 236, 241); 3 | $codeBgColor: #282c34; 4 | $arrowBgColor: #ccc; 5 | $badgeTipColor: rgb(38, 166, 154); 6 | $badgeWarningColor: darken(#ffe564, 35%); 7 | $badgeDangerColor: #DA5961; 8 | 9 | :root, :root.dark { 10 | --c-brand: #{$accentColor}; 11 | --c-brand-light: #{lighten($accentColor, 10%)}; 12 | --c-badge-tip: #{lighten($accentColor, 8%)}; 13 | --darken10AccentColor: #{darken($accentColor, 10%)}; 14 | --code-bg-color: #{$codeBgColor}; 15 | --code-ln-color: #{transparentize($accentColor, 0.75)}; 16 | --c-bg-arrow: #{$arrowBgColor}; 17 | --c-badge-tip: #{$badgeTipColor}; 18 | --c-badge-warning: #{$badgeWarningColor}; 19 | --c-badge-danger: #{$badgeDangerColor}; 20 | 21 | --font-family: "Titillium Web", system-ui, sans-serif; 22 | } 23 | 24 | :root.dark { 25 | --c-warning-text: #e2e2e2; 26 | 27 | .home .hero .action-button.primary { 28 | color: #e2e2e2; 29 | } 30 | } 31 | 32 | #main-title { 33 | display: none; 34 | } 35 | 36 | 37 | -------------------------------------------------------------------------------- /packages/docs/api-reference/README.md: -------------------------------------------------------------------------------- 1 | # API Reference 2 | 3 | Welcome to the Tiny Carousel API documentation page! 4 | 5 | This part of the documentation is focused on providing technical description for every public method/property provided by Tiny Carousel ecosystem. 6 | 7 | Use sidebar navigation (or hamburger menu if you’re on mobile) to choose modules you’d like to read about. 8 | 9 | :::tip Help us improve the documentation 10 | On the very bottom of every page there is a "Help us improve this page on GitHub" button. Feel free to use it whenever you think that something could be described better or when you see any typo/error. Don’t hesitate to write a suggestion in the "issues" tab or file a PR with a fix! 11 | 12 | Thank you! Any help is kindly appreciated 🙏 13 | ::: 14 | -------------------------------------------------------------------------------- /packages/docs/api-reference/integration-react.md: -------------------------------------------------------------------------------- 1 | # Integration - React 2 | 3 | This integration implements a React component which allows you to use TinyCarousel along with its whole plugin [ecosystem](../../ecosystem/#plugins). 4 | 5 | To learn on how to install and use plugin, [please see our usage guide](../../guide/usage/#react) or look into an example React app in the [Tiny Carousel React repository](https://github.com/FRSOURCE/tiny-carousel/blob/master/packages/react/src/App.tsx). 6 | 7 | 8 | ## Global API 9 | 10 | ### definePlugin 11 | 12 | 13 | - **Arguments:** 14 | 15 | Same as [carousel.use](./core/#carousel-use). 16 | 17 | - **Returns:** `[plugin: PluginDefinition, options: PluginOptions]` 18 | 19 | - **Usage:** 20 | 21 | Method used to properly format plugin configuration array before passing it to the TinyCarousel component. Add stricter TypeScript typings. Second argument (option) is dependent on the plugin you`re trying to use. 22 | 23 | 24 | ## Components 25 | 26 | 27 | 28 | ### TinyCarousel 29 | 30 | 31 | - **Props:** 32 | 33 | - `{string} tag = "ul"` 34 | - `{string} className` 35 | - `{PluginsProp} plugins = []` 36 | - [`{Config} config`](./core/#config) 37 | - `{ReactNode} children` 38 | - `{function} [eventCallbackName] (e.g. onAfterEventInit)` 39 | 40 | - **Events:** 41 | 42 | To add event emission you need to use [Plugin Custom Events](../ecosystem/#plugin-custom-events). 43 | 44 | All custom events can be handled with use of prop passed directly on the `TinyCarousel` component element. The name of prop follows the pattern `on{TIMING}Event{EVENT_NAME}` where `TIMING` and `EVENT_NAME` are taken from [one of the TinyCarousel events](./plugin-custom-events/#events). An example, so specify listener for `after:init` event, you should pass a callback as a value of the `onAfterEventInit` prop. For examples, have a look in a guide. 45 | 46 | - **Details:** 47 | 48 | Component added by React integration. Creates single TinyCarousel instance with tag name, plugins and configuration passed as a props. Change of the slotted children or any of the props would lead to TinyCarousel’s reinitialization. 49 | 50 | Additional API can be reached by using [`ref`](https://reactjs.org/docs/hooks-reference.html#useref) as can be seen [in the example](https://github.com/FRSOURCE/tiny-carousel/blob/master/packages/react/src/App.tsx#L40). 51 | 52 | ## Options 53 | 54 | 55 | ### TinyCarouselRef 56 | 57 | 58 | - **Details:** 59 | 60 | Data type describing TinyCarousel reference. Use it to add the proper type to the carousel `ref`. 61 | 62 | 63 | ### TinyCarouselProps 64 | 65 | 66 | - **Details:** 67 | 68 | Data type describing TinyCarousel component props. Use it to add the proper type to your callbacks [as shown here](https://github.com/FRSOURCE/tiny-carousel/blob/master/packages/react/src/App.tsx#L21). 69 | 70 | -------------------------------------------------------------------------------- /packages/docs/api-reference/integration-vue.md: -------------------------------------------------------------------------------- 1 | # Integration - Vue 2 | 3 | This package provides a Vue wrapper component for the Tiny Carousel. 4 | 5 | To learn on how to install and use plugin, [please see our usage guide](../../guide/usage/#vue) or look into an example Vue app in the [Tiny Carousel Vue repository](https://github.com/FRSOURCE/tiny-carousel/blob/master/packages/vue/src/App.vue). 6 | 7 | This integration supports **both** Vue 2 & 3. 8 | 9 | 10 | ## Global API 11 | 12 | ### definePlugin 13 | 14 | 15 | - **Arguments:** 16 | 17 | Same as [carousel.use](./core/#carousel-use). 18 | 19 | - **Returns:** `[plugin: PluginDefinition, options: PluginOptions]` 20 | 21 | - **Usage:** 22 | 23 | Method used to properly format plugin configuration array before passing it to the TinyCarousel component. Add stricter TypeScript typings. Second argument (option) is dependent on the plugin you`re trying to use. 24 | 25 | 26 | ## Components 27 | 28 | 29 | 30 | ### TinyCarousel 31 | 32 | 33 | - **Props:** 34 | 35 | - `{string} tag = "ul"` 36 | - `{PluginsProp} plugins = []` 37 | - [`{Config} config`](./core/#config) 38 | 39 | - **Events:** 40 | 41 | To add event emission you need to use [Plugin Custom Events](../ecosystem/#plugin-custom-events). All custom events can be handled with use of `v-bind` directive, directly on the `TinyCarousel` component element. 42 | For reference [please see the advanced example in our usage guide (especially HTML tab)](../../guide/usage/#vue). 43 | 44 | - **Details:** 45 | 46 | Component added by Vue integration. Creates single TinyCarousel instance with tag name, plugins and configuration passed as a props. Change of the slotted children or any of the props would lead to TinyCarousel’s reinitialization. 47 | 48 | Additional API can be reached by using [`ref`](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements) as can be seen [in the example](https://github.com/FRSOURCE/tiny-carousel/blob/master/packages/vue/src/App.vue#L13). 49 | 50 | ## Options 51 | 52 | 53 | ### TinyCarouselComponent 54 | 55 | 56 | - **Details:** 57 | 58 | Data type describing TinyCarousel component. Use it to add the proper type to the carousel `ref`. 59 | 60 | -------------------------------------------------------------------------------- /packages/docs/api-reference/plugin-autoplay.md: -------------------------------------------------------------------------------- 1 | # Plugin Autoplay 2 | 3 | This plugin adds autoplay feature to the Tiny Carousel. All you need to do is to install the plugin and watch that the slides are changing automatically! 4 | 5 | The plugin also extends Tiny Carousel instance with additional methods. Read more about it in the [instance methods section](#instance-methods). 6 | 7 | To learn on how to install and use plugin, [please see our usage guide](../../guide/usage/#plugin-autoplay). 8 | 9 | For configuration options please see [`PluginConfig`](#pluginconfig) below. 10 | 11 | 12 | ## PluginConfig 13 | 14 | 15 | - **Properties:** 16 | 17 | - `{number} autoplayTimeout = 4000` 18 | - `{boolean} autoplayImmediate = false` 19 | - `{boolean} pauseOnHover = true` 20 | 21 | - **Details:** 22 | 23 | `PluginConfig` is an object passed along to the [`carousel.use` method](./core/#carousel-use). 24 | - `autoplayImmediate` decides whether the first slide change should happen immediately after running [`carousel.play`](#carousel.play) method or after a timeout. Default value: `4000` 25 | - `autoplayTimeout` sets a time delay (in milliseconds) between slide changes. Default value: `false` 26 | - `pauseOnHover` specifies if the carousel autoplay should pause when hovered over and resume automatically when loses focus. Default value: `true` 27 | 28 | ## Instance methods 29 | 30 | 31 | ### carousel.play 32 | 33 | 34 | - **Arguments:** 35 | 36 | 37 | - [`{PlayOptions} options `](#playoptions) 38 | 39 | 40 | - **Returns:** `this` - this TinyCarousel instance (for chaining purposes) 41 | 42 | - **Usage:** 43 | 44 | Method used to enable the automatic slide playback. It’s behavior can be changed via `options` argument or [`instance config`](../core/#carousel-config) ([`defaultConfig`](../core/#defaultconfig) included). Each slide will be changed after a timeout specified by [`autoplayTimeout`](#config.autoplaytimeout). 45 | 46 | 47 | ### carousel.pause 48 | 49 | 50 | - **Arguments:** 51 | 52 | 53 | - [`{PauseOptions} options `](#pauseoptions) 54 | 55 | 56 | - **Returns:** `this` - this TinyCarousel instance (for chaining purposes) 57 | 58 | - **Usage:** 59 | 60 | Method which pauses the autoplay action. 61 | 62 | ## Options 63 | 64 | 65 | ### PlayOptions 66 | 67 | 68 | - **Properties:** 69 | 70 | - `{boolean} autoplayImmediate` 71 | 72 | - **Details:** 73 | 74 | Data type which holds additional configuration of [`carousel.play`](#carousel.play) method. 75 | Properties have the same meaning as in [`PluginConfig` data type](#pluginconfig). 76 | 77 | 78 | ### PauseOptions 79 | 80 | 81 | - **Properties:** 82 | 83 | - `{boolean} leavePauseOnHoverListeners` 84 | 85 | - **Details:** 86 | 87 | Data type which holds additional configuration of [`carousel.pause`](#carousel.pause) method. 88 | - `leavePauseOnHoverListeners` - whether [`carousel.pause`](#carousel.pause) should remove mouse listener handlers which were added when [`PluginConfig.pauseOnHover`](#pluginconfig) was set to `true` or not 89 | 90 | 91 | -------------------------------------------------------------------------------- /packages/docs/api-reference/plugin-custom-events.md: -------------------------------------------------------------------------------- 1 | # Plugin Custom Events 2 | 3 | This plugin triggers [CustomEvents](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) for Tiny Carousel core lifecycle events. This allows for the external code to be triggered right when it is necessary. Before or after an exact action - for example after the tiny carousel got initialized. 4 | 5 | The plugin also extends Tiny Carousel instance with additional methods. Read more about it in the [instance methods section](#instance-methods). 6 | 7 | :::tip 8 | This plugin is often a required dependency for the other parts of Tiny Carousel [ecosystem](../../ecosystem/). 9 | ::: 10 | 11 | To learn on how to install and use plugin, [please see our usage guide](../../guide/usage/#plugin-custom-events). 12 | 13 | For complete list of custom events raised by this plugin, please head directly to the [events section](#events). 14 | 15 | ## Instance methods 16 | 17 | 18 | ### carousel.on 19 | 20 | 21 | - **Arguments:** 22 | 23 | - `{string} eventName` 24 | - `{function} listener` 25 | - `{object | boolean} options ` 26 | 27 | - **Returns:** `this` - this TinyCarousel instance (for chaining purposes) 28 | 29 | - **Usage:** 30 | 31 | Method used to set a handler triggered for an event `eventName`. `listener` and `options` argument types are based on and passed directly to [a native `addEventListener` method](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). 32 | 33 | 34 | ### carousel.off 35 | 36 | 37 | - **Arguments:** 38 | 39 | - `{string} eventName` 40 | - `{function} listener` 41 | 42 | - **Returns:** `this` - this TinyCarousel instance (for chaining purposes) 43 | 44 | - **Usage:** 45 | 46 | Method used to remove the event `eventName` `listener` that has been added via [`carousel.on`](#carousel.on) method. 47 | 48 | 49 | ### carousel.dispatch 50 | 51 | 52 | - **Arguments:** 53 | 54 | - `{string} eventName` 55 | - `{unknown} payload ` 56 | - `{object} options ` 57 | 58 | - **Returns:** `this` - this TinyCarousel instance (for chaining purposes) 59 | 60 | - **Usage:** 61 | 62 | Method used to dispatch custom event `eventName` on Tiny Carousel instance. 63 | 64 | - `payload` 65 | - If not an object - will be turned into one as follows: `{ data: payload }` 66 | - Then (or firstly, if `payload` was an object) it will be enhanced with `tinyCarousel` field which would contain a reference to the [TinyCarousel instance](./core/#new-tinycarousel-carouselelement-config) 67 | - Lastly, such formatted object will be passed to the native [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) as event\`s payload 68 | 69 | - `options` argument is passed directly to the constructor of `CustomEvent` and thus might contain fields of the [`eventInit` type](https://developer.mozilla.org/en-US/docs/Web/API/Event/Event#values) - so, `bubbles`, `cancelable` or `composed` 70 | 71 | ## Events 72 | 73 | List of events triggered by default when Plugin Custom Events is used: 74 | 75 | 76 | | Event Name | Event Payload | 77 | | -------------------------- | ----------------------------------------------------- | 78 | | before:init | [`StandardRequiredPayload`](#standardrequiredpayload) | 79 | | after:init | [`StandardRequiredPayload`](#standardrequiredpayload) | 80 | | before:go-to | [`GoToEventPayload`](#gotoeventpayload) | 81 | | after:go-to | [`GoToEventPayload`](#gotoeventpayload) | 82 | | error:go-to | [`GoToErrorEventPayload`](#gotoerroreventpayload) | 83 | | before:find-possible-items | [`StandardRequiredPayload`](#standardrequiredpayload) | 84 | | after:find-possible-items | [`StandardRequiredPayload`](#standardrequiredpayload) | 85 | 86 | 87 | ## Payload Types 88 | 89 | ### StandardRequiredPayload 90 | 91 | - **Properties:** 92 | 93 | - [`{TinyCarousel} tinyCarousel`](./core/#new-tinycarousel-carouselelement-config) 94 | 95 | - **Details:** 96 | 97 | Standard payload type describing fields which are available in the every event dispatched through `plugin-custom-events`. `tinyCarousel` field holds reference to the current TinyCarousel instance. 98 | 99 | 100 | ### GoToEventPayload 101 | 102 | - **Properties:** 103 | 104 | - [`{TinyCarousel} tinyCarousel`](./core/#new-tinycarousel-carouselelement-config) 105 | - [`{SlideInfo} to`](#slideInfo) 106 | 107 | - **Details:** 108 | 109 | Data type which holds information about the active slide change process. For the description of the rest of fields, please look into [`StandardRequiredPayload`](#standardrequiredpayload) section. 110 | 111 | 112 | ### GoToErrorEventPayload 113 | 114 | - **Properties:** 115 | 116 | - [`{TinyCarousel} tinyCarousel`](./core/#new-tinycarousel-carouselelement-config) 117 | - [`{SlideInfo} to`](#slideInfo) 118 | - `{'overflow'} cause` 119 | 120 | - **Details:** 121 | 122 | Data type which hold information about the slide change process which have failed and a cause of its error. Current list of possible causes: `overflow`. For the description of the rest of fields, please look into [`StandardRequiredPayload`](#standardrequiredpayload) section. 123 | 124 | -------------------------------------------------------------------------------- /packages/docs/api-reference/plugin-mouse-drag.md: -------------------------------------------------------------------------------- 1 | # Plugin Mouse Drag 2 | 3 | This plugin extends Tiny Carousel with drag support for the mouse users. Install the plugin to allow your desktop users to swipe through slides! 4 | 5 | To learn on how to install and use plugin, [please see our usage guide](../../guide/usage/#plugin-mouse-drag). 6 | 7 | For configuration options please see [`PluginConfig`](#pluginconfig) below. 8 | 9 | This plugin consists of configurable Sass styling see available variables in [Styling section](#styling). 10 | 11 | 12 | ## PluginConfig 13 | 14 | 15 | - **Properties:** 16 | 17 | - `{string} mouseDragClassName = "frs-tc--md"` 18 | - `{string} mouseDragDraggingClassName = "frs-tc--mdd"` 19 | - `{string} mouseDragMomentumClassName = "frs-tc--mdm"` 20 | - `{number} mouseDragMomentumGravity = 1` 21 | - `{boolean} mouseDragThrottle = 30` 22 | 23 | - **Details:** 24 | 25 | `PluginConfig` is an object passed along to the [`carousel.use` method](./core/#carousel-use). 26 | - `mouseDragClassName` is a class name added to every Tiny Carousel instance with mouse drag plugin installed 27 | - `mouseDragDraggingClassName` is a class name added to the carousel element at the time when user is actively dragging the carousel`s slide 28 | - `mouseDragMomentumClassName` is a class name added to the carousel element right after user stops dragging, when the carousel is still moving (until it snaps to exact slide position) 29 | - `mouseDragMomentumGravity` sets a gravity for post-dragging momentum. The higher this value - the faster momentum is being lost 30 | - `mouseDragThrottle` specifies a mousemove event throttling time frame (in milliseconds). Read more here 31 | 32 | ## Styling 33 | 34 | Styling can be imported via: 35 | 36 | > Sass: `@frsource/tiny-carousel-plugin-mouse-drag/src/index.scss` 37 | > 38 | > CSS: `@frsource/tiny-carousel-plugin-mouse-drag/dist/index.css` 39 | 40 | When importing Sass source file you can configure [the variables](sass-lang.com/documentation/variables): 41 | 42 | - **Sass variables:** 43 | 44 | - `{string} $mouse-drag-class-name = "frs-tc--md"` 45 | - `{string} $mouse-drag-dragging-class-name = "frs-tc--mdd"` 46 | - `{string} $mouse-drag-momentum-class-name = "frs-tc--mdm"` 47 | 48 | - **Details:** 49 | 50 | - `$mouse-drag-class-name` is a class name which gives initial dragging styling to the carousel element. Default value: `frs-tc--md` 51 | - `$mouse-drag-dragging-class-name` is a class name used to specify carousel element state when user is actively dragging the slide. Default value: `frs-tc--mdd` 52 | - `$mouse-drag-momentum-class-name` is a class name used on the carousel element right after user stops dragging, when the carousel is still moving (until it snaps to exact slide position). Default value: `frs-tc--mdm` 53 | -------------------------------------------------------------------------------- /packages/docs/api-reference/plugin-scroll-snap-fallback.md: -------------------------------------------------------------------------------- 1 | # Plugin Scroll Snap Fallback 2 | 3 | This module provides automatic support mechanism and polyfill for [CSS scroll-snap feature](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap). You can force polyfill usage using [force configuration property](#pluginconfig). 4 | 5 | To learn on how to install and use plugin, [please see our usage guide](../../guide/usage/#plugin-scroll-snap-fallback). 6 | 7 | 8 | ## PluginConfig 9 | 10 | 11 | - **Properties:** 12 | 13 | - `{boolean} force` 14 | 15 | - **Details:** 16 | 17 | Config is an object passed along to the [`carousel.use` method](./core/#carousel-use). 18 | `force` configuration property allows you to override the result of support detection mechanism and force usage of JavaScript CSS Scroll Snap polyfill. By default value: `false`. 19 | -------------------------------------------------------------------------------- /packages/docs/contribution/README.md: -------------------------------------------------------------------------------- 1 | # Contribution 2 | 3 | The contribution guide is publicly available in the [`CONTRIBUTING.md` file in the repository root](https://github.com/FRSOURCE/tiny-carousel/blob/master/CONTRIBUTING.md). If you’re interested in working on this library please give it a good read first 📕 4 | -------------------------------------------------------------------------------- /packages/docs/ecosystem/README.md: -------------------------------------------------------------------------------- 1 | # Ecosystem 🌳 2 | 3 | Tiny Carousel is a modern, modular carousel library which consist of the whole ecosystem of pluggable modules. 4 | 5 | ## Core 6 | The main entry point is always a core package, which provides the most basic carousel API and allows extending of it functionalities. 7 | 8 | For now, the only and only core package is a [`@frsource/tiny-carousel-core`](https://www.npmjs.com/package/@frsource/tiny-carousel-core). It’s a CSS scroll snap points-based carousel system. Usage of this native API makes is snappy, lightweight and accessible solution. 9 | 10 | Learn more about the core package: 11 | | [API reference](../api-reference/core) | [Usage guide](../guide/usage/#core) | 12 | | - | - | 13 | 14 | ## Integrations 15 | 16 | Integration is a package which allows using TinyCarousel with a framework/library of your choice. 17 | 18 | ### React 19 | 20 | `@frsource/tiny-carousel` for your React app ⚛️ 21 | 22 | | [API reference](../api-reference/integration-react) | [Usage guide](../guide/usage/#react) | 23 | | - | - | 24 | 25 | ### Vue 26 | 27 | Brings `@frsource/tiny-carousel` into the Vue 2/3 world 💚 28 | 29 | | [API reference](../api-reference/integration-vue) | [Usage guide](../guide/usage/#vue) | 30 | | - | - | 31 | 32 | ## Plugins 33 | 34 | Plugin is a module which can be used to extend a Tiny Carousel instance with new set of functionalities. 35 | 36 | :::tip Become a contributor! 37 | Interested in writing your own plugin? [Click here to check out our contribution guide](../contribution). 38 | ::: 39 | 40 | Use the list below to find necessary information about API or a usage of the plugins: 41 | 42 | ### Plugin Autoplay 43 | 44 | Adds autoplay feature to the Tiny Carousel. 45 | 46 | | [API reference](../api-reference/plugin-autoplay) | [Usage guide](../guide/usage/#plugin-autoplay) | 47 | | - | - | 48 | 49 | ### Plugin Custom Events 50 | 51 | Triggers [CustomEvents](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) for Tiny Carousel core lifecycle events. This allows for the external code to listen & react on them right when it is necessary. 52 | 53 | | [API reference](../api-reference/plugin-custom-events) | [Usage guide](../guide/usage/#plugin-custom-events) | 54 | | - | - | 55 | 56 | ### Plugin Mouse Drag 57 | 58 | Adds the swiping support for the desktop/mouse users. 59 | 60 | | [API reference](../api-reference/plugin-mouse-drag) | [Usage guide](../guide/usage/#plugin-mouse-drag) | 61 | | - | - | 62 | 63 | 64 | ### Plugin Scroll Snap Fallback 65 | 66 | Provides polyfill for [CSS scroll-snap feature](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap). 67 | 68 | | [API reference](../api-reference/plugin-scroll-snap-fallback) | [Usage guide](../guide/usage/#plugin-scroll-snap-fallback) | 69 | | - | - | 70 | -------------------------------------------------------------------------------- /packages/docs/guide/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | **Tiny carousel** is a modular slider based on the modern CSS snap points technique. This makes the library fully customizable, really lightweight and incredibly performant with the smoothest mobile drag & drop support ever possible! 4 | 5 | ## Why 6 | 7 | Our team needed to add multiple carousel instances to the single view for a cross-platform project. Unfortunately, every other possible solution was too heavy to work well under harsh environment of the low-end mobile devices. To overcome this problem we have created **tiny carousel**! 8 | 9 | ## How does it work 10 | 11 | **Tiny carousel** is a name for the whole ecosystem of modules that can be used to setup a hugely customized slider for your web app! The main part is the [**core** module](./usage/#core) which creates the simplest form of carousel and allows carousel to be extended via plugin system. 12 | 13 | The sliding functionality is based on the [CSS scroll-snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap) and is supported by every [modern browser](https://caniuse.com/?search=scroll%20snap). This gives the library a native-like responsiveness and makes it a really lightweight solution. To understand scroll snapping better we suggest to read [this great article published on CSS-TRICKS](https://css-tricks.com/practical-css-scroll-snapping/). 14 | 15 | --- 16 | 17 | :::tip Help us improve the documentation 18 | On the very bottom of every page there is a "Help us improve this page on GitHub" button. Feel free to use it whenever you think that something could be described better or when you see any typo/error. Don’t hesitate to write a suggestion in the "issues" tab or file a PR with a fix! 19 | 20 | Thank you! Any help is kindly appreciated 🙏 21 | ::: 22 | 23 | --- 24 | 25 | After this brief introduction let’s jump to the next chapter! Now the time has come to learn how to install the Tiny Carousel package 💪 26 | -------------------------------------------------------------------------------- /packages/docs/guide/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ## Package managers 4 | 5 | You can install this library using your favorite package manager: 6 | 7 | ```bash 8 | # yarn 9 | yarn add @frsource/tiny-carousel-core 10 | 11 | # npm 12 | npm install @frsource/tiny-carousel-core 13 | ``` 14 | 15 | ## Content Delivery Network (CDN) 16 | 17 | To load it via CDN: 18 | 19 | ```html 20 | 21 | 20 | Tiny carousel is (and it will stay always that way) an open source project licensed under MIT. It started out as an part of the internal UI library of webdevelopment company. Help us in our mission to provide free, performant and top-notch quality libraries & tools for the FrontEnd community! 21 | 22 | 23 |