{"id":19220089,"url":"https://github.com/nativescript-community/ui-pager","last_synced_at":"2025-07-20T16:35:42.241Z","repository":{"id":40263999,"uuid":"263944447","full_name":"nativescript-community/ui-pager","owner":"nativescript-community","description":"Pager / Carousel component that allows the user to swipe left and right through pages of data.","archived":false,"fork":false,"pushed_at":"2025-01-23T09:24:44.000Z","size":24798,"stargazers_count":19,"open_issues_count":26,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T13:02:15.782Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nativescript-community.github.io/ui-pager/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["farfromrefug"]}},"created_at":"2020-05-14T14:54:23.000Z","updated_at":"2025-01-23T09:24:48.000Z","dependencies_parsed_at":"2023-12-14T12:15:38.401Z","dependency_job_id":"63b98624-0dd1-462a-9483-ab34767ed820","html_url":"https://github.com/nativescript-community/ui-pager","commit_stats":{"total_commits":1145,"total_committers":29,"mean_commits":39.48275862068966,"dds":0.6026200873362446,"last_synced_commit":"0c4a3b98f445147c7c596656fa3a60d0f5750f2c"},"previous_names":[],"tags_count":126,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-pager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-pager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-pager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-pager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-pager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054227,"owners_count":21039952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T14:33:55.899Z","updated_at":"2025-04-09T14:06:33.086Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":["Plugins"],"sub_categories":["UI Plugins"],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003eThis monorepo contains multiple packages:\u003cbr\u003e\u003cbr\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eui-pager\u003c/b\u003e\u003c/summary\u003e\n\n\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-pager\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-pager?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-pager.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-pager\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-pager.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data. \u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://github.com/nativescript-community/ui-pager/raw/master/images/demo-ios.gif\" height=\"500\" /\u003e | \u003cimg src=\"https://github.com/nativescript-community/ui-pager/raw/master/images/demo-android.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [API](#api)\r\n\t* [Properties](#properties)\r\n* [Usage in Angular](#usage-in-angular)\r\n\t* [Examples](#examples)\r\n* [Usage in React](#usage-in-react)\r\n\t* [Examples](#examples-1)\r\n* [Usage in Svelte](#usage-in-svelte)\r\n\t* [Examples](#examples-2)\r\n* [Usage in Vue](#usage-in-vue)\r\n\t* [Examples](#examples-3)\r\n* [Custom Transformer](#custom-transformer)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-pager`\n\n\r\n[](#api)\r\n\r\n\r\n[](#api)\r\n\r\n## API\n\n### Properties\n\n| Property | Type |\n| - | - |\n| items | `array` or `ItemsSource` \n| selectedIndex | `number` |\n| canGoRight | `boolean` |\n| canGoLeft | `boolean` |\n| spacing | `PercentLengthType` |\n| peaking | `PercentLengthType` |\n| perPage | `number` |\n| indicator | `string`  ('disable', 'none', 'worm', 'fill', 'swap', 'thin_worm', 'flat')|\n| circularMode | `boolean` |\n| autoPlayDelay | `number` |\n| autoPlay | `boolean` |\n| orientation | `string` ('horizontal' or 'vertical') |\n| autoPlay | `boolean` |\n| disableSwipe | `boolean` |\n| showIndicator | `boolean` |\n| transformers | `string` |\n\n\n```\nPager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.\n```\n\n\n\r\n[](#usage-in-angular)\r\n\r\n\r\n[](#usage-in-angular)\r\n\r\n## Usage in Angular\n\nImport the module into your project.\n\n```typescript\nimport { PagerModule } from \"@nativescript-community/ui-pager/angular\";\n\n@NgModule({\n    imports: [\n        PagerModule,\n    ],\n})\n```\n\n### Examples\n\n- [Static Pager](demo-snippets/ng/static-pager)\n  - A simple pager example using static content.\n- [Basic Pager](demo-snippets/ng/basic-pager)\n  - A simple pager example using dynamic content.\n\n\r\n[](#usage-in-react)\r\n\r\n\r\n[](#usage-in-react)\r\n\r\n## Usage in React\n\nImport the module into your project.\n\n```typescript\nimport { Pager } from '@nativescript-community/ui-pager/react';\n```\n\n### Examples\n\n- [Basic Pager](demo-snippets/react/BasicPager.tsx)\n  - A simple pager example using dynamic content.\n\r\n[](#usage-in-svelte)\r\n\r\n\r\n[](#usage-in-svelte)\r\n\r\n## Usage in Svelte\n\nImport the module into your project.\n\n```typescript\nimport { registerNativeViewElement } from 'svelte-native/dom';\n\nimport PagerElement from '@nativescript-community/ui-pager/svelte';\nimport { PagerItem } from '@nativescript-community/ui-pager';\n\nPagerElement.register();\nregisterNativeViewElement('pageritem', () =\u003e PagerItem);\n```\n\n### Examples\n\n- [Static Pager](demo-snippets/svelte/StaticPager.svelte)\n  - A simple pager example using static content.\n- [Basic Pager](demo-snippets/svelte/BasicPager.svelte)\n  - A simple pager example using dynamic content.\n\n\r\n[](#usage-in-vue)\r\n\r\n\r\n[](#usage-in-vue)\r\n\r\n## Usage in Vue\n\nImport the module into your project.\n\n```typescript\nimport Vue from 'nativescript-vue';\nimport Pager from '@nativescript-community/ui-pager/vue';\n\nVue.use(Pager);\n```\n\n### Examples\n\n- [Static Pager](demo-snippets/vue/StaticPager.vue)\n  - A simple pager example using static content.\n- [Basic Pager](demo-snippets/vue/BasicPager.vue)\n  - A simple pager example using dynamic content.\n\n\n\r\n[](#custom-transformer)\r\n\r\n\r\n[](#custom-transformer)\r\n\r\n## Custom Transformer\n\nYou can define custom transformer for iOS/Android\n\nYou can follow the `Scale` example for [iOS](src/ui-pager/transformers/Scale.ios.ts) and [Android](src/ui-pager/transformers/Scale.android.ts) to create your custom transformer.\n\nThen you can register your transformer on app start with (this example registered the included but not registered Scale transformer): \n```ts\nimport { Pager } from '@nativescript-community/ui-pager';\nimport transformer from '@nativescript-community/ui-pager/transformers/Scale';\n\nPager.registerTransformer('scale', transformer)\n```\nThen you can use that transformer with the `transformers` property of `Pager`\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eui-pager-indicator\u003c/b\u003e\u003c/summary\u003e\n\n\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-pager-indicator\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-pager-indicator?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-pager-indicator.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-pager-indicator\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-pager-indicator.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA NativeScript Indicator for Pager / Carousel /CollectionView\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://github.com/nativescript-community/ui-pager/raw/master/images/demo-ios.gif\" height=\"500\" /\u003e | \u003cimg src=\"https://github.com/nativescript-community/ui-pager/raw/master/images/demo-android.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [API](#api)\r\n\t* [Properties](#properties)\r\n* [Usage in Angular](#usage-in-angular)\r\n\t* [Examples](#examples)\r\n* [Usage in Vue](#usage-in-vue)\r\n\t* [Examples](#examples-1)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-pager-indicator`\n\n\r\n[](#api)\r\n\r\n\r\n[](#api)\r\n\r\n## API\n\n### Properties\n\n| Property | Type |\n| - | - |\n| color | `Color` or `string` |\n| selectedColor | `Color` or `string` |\n\n\n```\nPagerIndicator add page control for Pager or other Paging Views.\n```\n\n\r\n[](#usage-in-angular)\r\n\r\n\r\n[](#usage-in-angular)\r\n\r\n## Usage in Angular\n\n\nIf you are planning to use an indicator, add the following to your module:\n\n```typescript\nimport { registerElement } from \"@nativescript/angular\";\nimport { PagerIndicator } from \"@nativescript-community/ui-pager-indicator\";\nregisterElement(\"PagerIndicator\", () =\u003e PagerIndicator)\n```\n\nThen in your template:\n```html\n\u003cPager id=\"pager\" [items]=\"items\"\n    ...\n\u003c/Pager\u003e\n\u003cPagerIndicator pagerViewId=\"pager\" /\u003e\n```\n\n### Examples\n- [Indicator Pager](demo-snippets/ng/indicator)\n  - A simple pager example using dynamic content and indicator.\n\n\r\n[](#usage-in-vue)\r\n\r\n\r\n[](#usage-in-vue)\r\n\r\n## Usage in Vue\n\nImport the module into your project.\n\n\n```typescript\nimport Vue from 'nativescript-vue';\nVue.registerElement('PagerIndicator', () =\u003e require('@nativescript-community/ui-pager-indicator').PagerIndicator);\n```\n\nthen in your template:\n```html\n\u003cPager id=\"pager\" :items=\"items\"\n    ...\n\u003c/Pager\u003e\n\u003cPagerIndicator pagerViewId=\"pager\"/\u003e\n```\n\n### Examples\n\n- [Indicator Pager](demo-snippets/vue/Indicator.vue)\n  - A simple pager example using dynamic content and indicator.\n\u003c/details\u003e\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-pager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-pager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-pager/lists"}