{"id":15647285,"url":"https://github.com/joshdsommer/nativescript-ngx-slides","last_synced_at":"2025-04-19T13:50:06.136Z","repository":{"id":38814033,"uuid":"76192650","full_name":"JoshDSommer/nativescript-ngx-slides","owner":"JoshDSommer","description":"A NativeScript + Angular module for to add a slides component to your mobile app","archived":false,"fork":false,"pushed_at":"2022-12-07T19:35:01.000Z","size":3123,"stargazers_count":45,"open_issues_count":22,"forks_count":34,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T05:34:02.203Z","etag":null,"topics":["angular","image-carousel","nativescript-plugin","nativescript-slides","slide","slider-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JoshDSommer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-11T18:42:49.000Z","updated_at":"2024-08-13T07:39:22.000Z","dependencies_parsed_at":"2023-01-23T19:30:12.323Z","dependency_job_id":null,"html_url":"https://github.com/JoshDSommer/nativescript-ngx-slides","commit_stats":null,"previous_names":["theoriginaljosh/nativescript-ng2-slides","theoriginaljosh/nativescript-ngx-slides"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshDSommer%2Fnativescript-ngx-slides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshDSommer%2Fnativescript-ngx-slides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshDSommer%2Fnativescript-ngx-slides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshDSommer%2Fnativescript-ngx-slides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoshDSommer","download_url":"https://codeload.github.com/JoshDSommer/nativescript-ngx-slides/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249707467,"owners_count":21313850,"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":["angular","image-carousel","nativescript-plugin","nativescript-slides","slide","slider-plugin"],"created_at":"2024-10-03T12:18:10.682Z","updated_at":"2025-04-19T13:50:06.110Z","avatar_url":"https://github.com/JoshDSommer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NativeScript + Angular Slides for iOS and Android\n\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][npm-url]\n[![Twitter Follow][twitter-image]][twitter-url]\n\n[npm-image]: http://img.shields.io/npm/v/nativescript-ngx-slides.svg\n[npm-url]: https://npmjs.org/package/nativescript-ngx-slides\n[downloads-image]: http://img.shields.io/npm/dt/nativescript-ngx-slides.svg\n[twitter-image]: https://img.shields.io/twitter/follow/_joshsommer.svg?style=social\u0026label=Josh%20Sommer\n[twitter-url]: https://twitter.com/_joshsommer\n\n### Intro slides example:\n\n[![Nativescript Slides. Click to Play](https://img.youtube.com/vi/kGby8qtSDjM/0.jpg)](https://www.youtube.com/embed/kGby8qtSDjM)\n\n### Image carousel example:\n\n[![Nativescript Slides. Click to Play](https://img.youtube.com/vi/RsEqGAKm62k/0.jpg)](https://www.youtube.com/embed/RsEqGAKm62k)\n\n_videos are from the NativeScript Slides plugin. all features may not be implemented yet._\n\n_videos by [Brad Martin](https://github.com/bradmartin)_\n\n## Example Usage:\n\n```ts\nimport { SlidesModule } from \"nativescript-ngx-slides\";\n\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n  imports: [NativeScriptModule, SlidesModule],\n  schemas: [NO_ERRORS_SCHEMA]\n})\nexport class AppModule {}\n```\n\n### XML\n\n```xml\n\u003cslides\u003e\n    \u003cslide class=\"slide-1\"\u003e\n        \u003cLabel text=\"This is Panel 1\"\u003e\u003c/Label\u003e\n    \u003c/slide\u003e\n    \u003cslide class=\"slide-2\"\u003e\n        \u003cLabel text=\"This is Panel 2\"\u003e\u003c/Label\u003e\n    \u003c/slide\u003e\n    \u003cslide class=\"slide-3\"\u003e\n        \u003cLabel text=\"This is Panel 3\"\u003e\u003c/Label\u003e\n    \u003c/slide\u003e\n    \u003cslide class=\"slide-4\"\u003e\n        \u003cLabel text=\"This is Panel 4\"\u003e\u003c/Label\u003e\n    \u003c/slide\u003e\n    \u003cslide class=\"slide-5\"\u003e\n        \u003cLabel text=\"This is Panel 5\"\u003e\u003c/Label\u003e\n    \u003c/slide\u003e\n\u003c/slides\u003e\n```\n\n### CSS\n\nplace this in the app.css file in the root of your project.\n\n```css\n.slide-1 {\n  background-color: darkslateblue;\n}\n\n.slide-2 {\n  background-color: darkcyan;\n}\n.slide-3 {\n  background-color: darkgreen;\n}\n\n.slide-4 {\n  background-color: darkgoldenrod;\n}\n.slide-5 {\n  background-color: darkslategray;\n}\nlabel {\n  text-align: center;\n  width: 100%;\n  font-size: 35;\n  margin-top: 35;\n  color: #fff;\n}\n```\n\nGreat for Intros/Tutorials to Image Carousels.\n\nThis very much a work in progress. Please feel free to contribute.\n\n### Attributes for SlideContainer\n\n- **loop : boolean** - If true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.\n\n- **pageIndicators : boolean** - If true adds indicator dots to the bottom of your slides.\n\n- **swipeSpeed : number** - Determines the speed of swipe. The bigger `swipeSpeed` property is, the faster you swipe the slides. Default value is 3. Try changing it to 15 to see the result.\n\n#### Indicators\n\nIf the property `pageIndicators` is `true` you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.\n\n```css\n.slide-indicator-inactive {\n  background-color: #fff;\n  opacity: 0.4;\n  width: 10;\n  height: 10;\n  margin-left: 2.5;\n  margin-right: 2.5;\n  margin-top: 0;\n  border-radius: 5;\n}\n\n.slide-indicator-active {\n  background-color: #fff;\n  opacity: 0.9;\n  width: 10;\n  height: 10;\n  margin-left: 2.5;\n  margin-right: 2.5;\n  margin-top: 0;\n  border-radius: 5;\n}\n```\n\n#### Plugin Development Work Flow:\n\n- Clone repository to your machine.\n- Run `npm install` to prepare the project\n- Run and deploy to your device or emulator with `npm run android` or `npm run ios`\n- Build a ngPackagr version with `npm run build`\n\n#### Known issues\n\n- Does not work well inside of ScrollView or TabViews.\n\n## Contributors\n\n| [\u003cimg alt=\"TheOriginalJosh\" src=\"https://avatars.githubusercontent.com/u/1486275?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/TheOriginalJosh) | [\u003cimg alt=\"dobjek\" src=\"https://avatars.githubusercontent.com/u/353596?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/dobjek) | [\u003cimg alt=\"EddyVerbruggen\" src=\"https://avatars.githubusercontent.com/u/1426370?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/EddyVerbruggen) | [\u003cimg alt=\"Vahid Najafi\" src=\"https://avatars0.githubusercontent.com/u/11078601?s=460\u0026v=4\" width=\"117\"\u003e](https://github.com/vahidvdn) | [\u003cimg alt=\"Marco Mantovani\" src=\"https://avatars.githubusercontent.com/u/1965169?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/codeback) |\n| :-------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: |\n|                                               [Josh Sommer](https://github.com/TheOriginalJosh)                                               |                                            [dobjek](https://github.com/dobjek)                                             |                                            [Eddy Verbruggen](https://github.com/EddyVerbruggen)                                             |                                              [Vahid Najafi](https://github.com/vahidvdn)                                              |                                            [Codeback Software](https://github.com/codeback)                                            |\n\n## Contributing guidelines\n\n[Contributing guidelines](https://github.com/TheOriginalJosh/nativescript-swiss-army-knife/blob/master/CONTRIBUTING.md)\n\n## License\n\n[MIT](/LICENSE)\n\nfor {N} version 2.0.0+\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshdsommer%2Fnativescript-ngx-slides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshdsommer%2Fnativescript-ngx-slides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshdsommer%2Fnativescript-ngx-slides/lists"}