{"id":15018568,"url":"https://github.com/manijak/nativescript-carousel","last_synced_at":"2025-04-05T21:09:20.372Z","repository":{"id":12347799,"uuid":"71664035","full_name":"manijak/nativescript-carousel","owner":"manijak","description":"Carousel component for NativeScript (iOS/Angular + TS, Angular, Vue)","archived":false,"fork":false,"pushed_at":"2023-03-04T04:22:17.000Z","size":10060,"stargazers_count":162,"open_issues_count":44,"forks_count":62,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T19:06:34.158Z","etag":null,"topics":["android","angular","carousel","ios","nativescript","nativescript-carousel","typescript","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manijak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2016-10-22T20:31:30.000Z","updated_at":"2024-12-11T10:33:31.000Z","dependencies_parsed_at":"2024-06-19T16:02:58.350Z","dependency_job_id":"b4e34e72-4f91-4c56-bd85-d3dcfb0f9467","html_url":"https://github.com/manijak/nativescript-carousel","commit_stats":{"total_commits":192,"total_committers":18,"mean_commits":"10.666666666666666","dds":"0.36458333333333337","last_synced_commit":"9a1bc1403863a0573e6538f8da0ff9a1e42eb40e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manijak%2Fnativescript-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manijak%2Fnativescript-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manijak%2Fnativescript-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manijak%2Fnativescript-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manijak","download_url":"https://codeload.github.com/manijak/nativescript-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399878,"owners_count":20932880,"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":["android","angular","carousel","ios","nativescript","nativescript-carousel","typescript","vue"],"created_at":"2024-09-24T19:52:07.706Z","updated_at":"2025-04-05T21:09:20.340Z","avatar_url":"https://github.com/manijak.png","language":"TypeScript","readme":"This plugin is now maintained by the fine devs at NStudio. \nYou can find the new repo here: https://github.com/nstudio/nativescript-plugins/tree/main/packages/nativescript-carousel\n\n----------------------------------------------------------------\n\n[![npm](https://img.shields.io/npm/v/nativescript-carousel.svg)](https://www.npmjs.com/package/nativescript-carousel)\n[![npm](https://img.shields.io/npm/dt/nativescript-carousel.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-carousel)\n\n# NativeScript Carousel\n\nA simple carousel component for NativeScript.\n\n| Platform | Supported | Version  |                                      NativeView                                       |\n| -------- | :-------: | :------: | :-----------------------------------------------------------------------------------: |\n| iOS      |    Yes    | iOS 8.1+ |              [DKCarouselView](https://github.com/manijak/DKCarouselView)              |\n| Android  |    Yes    | API 15+  | ViewPager with [PageIndicatorView](https://github.com/romandanylyk/PageIndicatorView) |\n\n## Installation\n\nNativeScript 7+:\n\n```bash\nns plugin add nativescript-carousel\n```\n\nNativeScript less than NS7:\n\n```bash\ntns plugin add nativescript-carousel@6.1.1\n```\n\n## Limitations\n\n- (iOS) PagerIndicator animations not available for iOS, only Android.\n- (Android) Auto- and Infinite-paging not available.\n- (Android) Carousel still needs to be wrapped in a GridLayout for the indicator to overlap.\n\n## Usage\n\nCheck out the demos included in this repo for instructions on how to use the Carousel with your choice of framework:\n\n[Vanilla TS demo](https://github.com/manijak/nativescript-carousel/tree/master/demo)\n\n[Angular demo](https://github.com/manijak/nativescript-carousel/tree/master/demo-ng)\n\n[Vue demo](https://github.com/manijak/nativescript-carousel/tree/master/demo-vue)\n\n## Attributes - Common\n\n- **items** _optional_ (must be used with `itemTemplate`)\n\nAssign a data-array to generate the slides and apply the bindingContext. If `items` is populated then you must use the template-option.\n\n- **itemTemplate** _optional_ (must be used with `items`)\n\nDefines the view template for each slide-view to be generated.\n\n- **selectedPage** _optional_\n\nSets/Gets the active page by index\n\n- **showIndicator** _optional_\n\nShows or hides the page-indicator\n\n- **indicatorColor** _optional_\n\nSets the active indicator color. Default is semi-transparent white. Use hex or color-name.\n\n- **indicatorColorUnselected**\n\nSets the color of unselected indicators\n\n- **indicatorOffset** _optional_\n\nBy default the indicator is centered at the bottom. You can use points (x,y) to move the indicator. E.g. `indicatorOffset=\"100,100\"`\n\n## Attributes - iOS specific\n\n- **finite** _optional_\n\nIf true last slide will wrap back to first and visa versa\n\n- **bounce** _optional_\n\nIf set to 'true' scrolling will bounce at the first/last page (non-infinite). Default is 'false'.\n\n- **autoPagingInterval** _optional_\n\nDefines the interval in seconds to wait before the next slide is shown. Default is 0 (off).\n\n- **scrollEnabled** _optional_\n\nEnables/Disables user scroll on the Carousel.\n\n- **ios**\n\nReturns the `DKCarouselView` object.\n\n## Attributes - Android specific\n\n- **android**\n\nReturns the `ViewPager` object.\n\n- **indicatorAnimation**\n\nSets the pager-indicator animation type. Choose between: `color`, `slide`, `scale`, `worm`, `thin_worm`, `fill`, `drop` or `none`. Default is `none`.\n\n- **indicatorAnimationDuration**\n\nSets the pager-indicator animation duration in milliseconds. Default is 500.\n\n- **indicatorAlignment**\n\nSets the pager-indicator alignment. Choose between `top` or `bottom`. Default is `bottom`.\n\n- **indicatorRadius**\n\nSets the pager-indicator dot radius.\n\n- **indicatorPadding**\n\nSets the pager-indicator dot padding.\n\n- **pageIndicatorCount**\n\nSet the indicator count which will change the underlying Android data adapter. See issue [#5 discussion](https://github.com/manijak/nativescript-carousel/issues/5#issuecomment-414993988)\n\n## Demo\n\n| iOS                                                                                              | Android                                                                                                  |\n| ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- |\n| ![iOS](https://github.com/manijak/nativescript-carousel/raw/master/screenshots/ios_carousel.gif) | ![Android](https://github.com/manijak/nativescript-carousel/raw/master/screenshots/android_carousel.gif) |\n\n#### Indicator animations (Android only!)\n\n| NONE                                                                                                       | COLOR                                                                                                        | SCALE                                                                                                        | SLIDE                                                                                                        |\n| ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |\n| ![anim_none](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_none.gif) | ![anim_color](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_color.gif) | ![anim_scale](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_scale.gif) | ![anim_slide](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_slide.gif) |\n\n| WORM                                                                                                       | THIN_WORM                                                                                                            | FILL                                                                                                       | DROP                                                                                                       | SWAP                                                                                                       |\n| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |\n| ![anim_worm](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_worm.gif) | ![anim_thin_worm](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_thin_worm.gif) | ![anim_fill](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_fill.gif) | ![anim_drop](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_drop.gif) | ![anim_swap](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_swap.gif) |\n\n## Changelog\n\n**7.0.1**\n\n- Hotfix release: Fixes issues with the `@NativeClass()` decorator.\n\n**7.0.0**\n\n- Plugin updated to support NativeScript v7.0 release. Thanks to @BradMartin, @NathanWalker \u0026 @rickwalking for all the PRs and making sure the code compiles \u0026 runs. :clap:\n\n**6.1.0**\n\n- Fix for iOS safe-area issues. No need to use the custom css-padding-hack any more.\n- DKCarouselView pod updated to version 2.5.0 (fix safe-area layout).\n- Known bugs: Orientation change render-issues on iOS (DKCarouselView) (help wanted).\n- Demos updated.\n\n**6.0.0**\n\n- NativeScript 6.0 \u0026 AndroidX migration.\n- IndicatorView gradle bumped to 1.0.3 (androidx).\n- Some refactorings on the Android side for the plugin to work better with Angular \u0026 Vue.\n- Demos updated, again.\n- Instructions for each demo updated.\n\n**4.2.5**\n\n- Fix for the dreadded `PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged!` error on Android.\n- Hotfix on the AndroidX migration.\n- Minor refactor in the `refresh()` function. Safer to call on demand.\n- Redesigned all demo apps. Added more advanced examples.\n- 4.x will be the last Nativescript 5.x version. All future versions will be Nativescript 6.x only and that includes AndroidX.\n\n**4.2.1**\n\n- Hotfix for static items. Sorry!\n\n**4.2.0**\n\n- AndroidX update for NS6. Thanks @bradmartin!\n- Code cleanup, typings fix.\n- Demos updated. Proper Vue-demo added.\n\n**4.1.0**\n\n- Added setter for `pageIndicatorCount` for Android to enable dynamically changing the length of the carousel items array without Android throwing a crash about the adapster set changing incorrectly.\n\n**4.0.2**\n\n- Carousel now extends from GridLayout instead of AbsoluteLayout (better positioning). (Thanks @bradmartin)\n\n**4.0.0**\n\n- Mirgration to TypeScript, typings added (Thanks @bradmartin)\n- Cleanup in demo app, added ng-demo (Thanks @bradmartin)\n\n**3.1.1**\n\n- Made comaptible for recent TNS 3.2.x releases.\n- Merged fix regarding the `notifyDataSetChanged` issue. Thanks @OPADA-Eng\n- Fixed issue on iOS when having only 2 slides. Thanks @sitefinitysteve\n\n**3.1.0**\n\n- Made comaptible for recent TNS 3.1.x releases.\n- Updated Android indicator library to latest version.\n\n**3.0.2**\n\n- Fixed an issue with events not working on Android (affected all events).\n\n**3.0.1**\n\n- Fixed a critical bug on Android during `refresh` when navigating back to a view with a Carousel.\n\n**3.0.0**\n\n- Finally! Support for TNS 3.x. Big thanks to @MattNer0, @sitefinitysteve, @hristo, @NickIliev\n- Fixed the \"refresh observable\" issue on Android, thanks @MattNer0.\n- New property to enable/disable scroll, thanks @sitefinitysteve.\n- New property for Android: `indicatorOffset`, thanks @sitefinitysteve.\n- Fixed issue with orientation change on iOS. Please use `nativescript-orientation` plugin in order to trigger UI-refresh.\n- Code refactor \u0026 cleanup, introduced common.js\n- Updated Pod \u0026 Android-IndicatorView to latest version.\n\n**2.4.2**\n\n- Added `bounce` property to the plugin and the Pod. Thanks to @sitefinitysteve.\n\n**2.4.1**\n\n- Fixed an issue on iOS when updating `Items` binding, would not refresh Carousel-view.\n\n**2.4.0**\n\n- Added new event, 'pageScrolling'. Thanks to @sitefinitysteve!\n- Updated gradle for 'PageIndicatorView' to version 0.1.2\n- Updated package.json with 'plugin' metadata to comply with the upcomming 3.0 plugin standard\n- Potential fix for `ViewPager.populate` exception on Android.\n\n**2.3.1**\n\n- Potential fix for ng2 \u0026 webpack users (`Trying to link invalid 'this' to a Java object`). Thanks @peterstaev.\n- Updated android indicators gradle plugin. New animation: `swap`!\n\n**2.3.0**\n\n- Changed the iOS Pod to point to our own repo! We have the control ;)\n- New property available for iOS: `indicatorColorUnselected`. Allows you to set color to the unselected dots.\n\n**2.2.0**\n\n- Fixed issue with the `refresh` function that could cause a crash or removal of slides (Android).\n- Updated Android-indicators gradle library to v0.1.0. More stable and more animations! New animations are: `drop`, `scale` and `thin_worm`.\n- Fixed issue with a small white bar being shown if the indicators are disabled (Android). Thanks to @EddyVerbruggen.\n- Fixed, another, potential bug that would cause app to crash when resuming he activity (Android).\n\n**2.1.2**\n\n- Fixed a critical bug that would cause the app to crash when resuming the activity (Android). Thanks to @EddyVerbruggen.\n\n**2.1.1**\n\n- Corrected README, iOS does indeed allow for tap-events innside the CarouselItems. Thanks @terreb!\n- Fixed the selectedPage property on iOS, now also returns selected index.\n- Updated iOS Podfile to 1.4.12\n\n**2.1.0**\n\n- Added Android support!\n- Android gets animated pager-indicators made by @romandanylyk.\n\n**1.1.0**\n\n- Updated pod with version '1.4.10'\n- Fixed page-change-event when finite is set to 'true'\n- Added new property 'selectedPage' (set active page by index).\n- Updated demo app\n\n**1.0.0**\n\n- Initial release\n\n## Author\n\n- [manijak](https://github.com/manijak)\n\n## Collaborators\n\n- [bradmartin](https://github.com/bradmartin)\n- [NathanWalker](https://github.com/NathanWalker)\n- [rickwalking](https://github.com/rickwalking)\n- [sitefinitysteve](https://github.com/sitefinitysteve)\n- [EddyVerbruggen](https://github.com/EddyVerbruggen)\n- [Pip3r4o](https://github.com/Pip3r4o)\n- [MattNer0](https://github.com/MattNer0)\n\n## Contributing\n\nI will accept pull requests that improve this and assign credit.\n\n- Fork and clone the repository\n- `cd src \u0026\u0026 npm run setup`\n- `npm run demo.android` for android development\n- `npm run demo.ios` for iOS development\n- `npm run demo-ng.ios` for iOS Angular app\n- `npm run demo-ng.android` for Android Angular\n- `npm run demo-vue.ios` for iOS Vue app\n- `npm run demo-vue.android` for Android Vue\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanijak%2Fnativescript-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanijak%2Fnativescript-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanijak%2Fnativescript-carousel/lists"}