Tiny carousel - your favourite carousel library 👑
32 |Now in React 
33 | Carousel is { isInitialized ? 'initialized' : 'not initialized' }
56 | 57 | 63 |├── .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 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
25 | Getting Started
26 | ·
27 | Contribution
28 | ·
29 | Documentation
30 | ·
31 | File an Issue
32 | ·
33 | Have a question or an idea?
34 |
35 |
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 |
50 |
51 |
52 | www.frsource.org/tiny-carousel
53 |
54 |
55 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
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 |
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 |
44 |
45 |
46 | www.frsource.org/tiny-carousel
47 |
48 |
49 |
15 |
16 |
17 |
18 |
19 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
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 |
35 |
36 | The plugin for the Tiny Carousel ecosystem.
37 |
Adds play/pause methods to the carousel instance.
38 |
Allows to enable autoplay with a set timeout.
39 |
40 |
41 |
45 |
46 |
47 | www.frsource.org/tiny-carousel
48 |
49 |
50 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
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 |
35 | The plugin being a part of the Tiny Carousel ecosystem.
36 |
Triggers native CustomEvents for all of the most important Tiny Carousel methods (event list).
37 |
Extends Tiny Carousel with additional instance methods.
38 |
39 |
40 |
44 |
45 |
46 | www.frsource.org/tiny-carousel
47 |
48 |
49 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
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 |
35 |
36 | The plugin for the Tiny Carousel ecosystem.
37 |
Adds dragging support for desktop users.
38 |
Native-like - feel the gravity & momentum after you swipe.
39 |
Never end up between slides with advanced snapping mechanism.
40 |
Throttle mouse move events for the best drag performance & user experience.
41 |
42 |
43 |
47 |
48 |
49 | www.frsource.org/tiny-carousel
50 |
51 |
52 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
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 |
35 |
36 | The plugin for the Tiny Carousel ecosystem that adds a scroll snap fallback for older browsers.
37 |
Polyfills CSS snap points (by default) only when needed.
38 |
39 |
40 |
44 |
45 |
46 | www.frsource.org/tiny-carousel
47 |
48 |
49 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
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 |
35 |
36 | The @frsource/tiny-carousel integration for React.
37 |
Adds `TinyCarousel` component to your project.
38 |
Supports plugins from the Tiny Carousel ecosystem.
39 |
40 |
41 |
42 |
46 |
47 |
48 | www.frsource.org/tiny-carousel
49 |
50 |
51 |
Carousel is { isInitialized ? 'initialized' : 'not initialized' }
56 | 57 | 63 |}Event${Capitalize
2 |
3 |
22 | Usage guide
23 | ·
24 | API Reference
25 | ·
26 | Contribution
27 | ·
28 | File an Issue
29 | ·
30 | Have a question or an idea?
31 |
35 |
47 | Carousel is {{ isInitialized ? 'initialized' : 'not initialized' }}}`
25 | : `onEvent${Capitalize
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Brings @frsource/tiny-carousel into the Vue 2/3 world 💚
20 |
21 |
32 |
36 | The @frsource/tiny-carousel integration for Vue.
37 |
Adds `TinyCarousel` component to your project.
38 |
Supports plugins from the Tiny Carousel ecosystem.
39 |
Compatible with both Vue 2 & Vue 3.
40 |
41 |
42 |
43 |
48 |
49 | www.frsource.org/tiny-carousel
50 |
51 |
52 | Tiny carousel - your favourite carousel library 👑
5 | Now in Vue.js 🎉
6 |
22 |