{"id":15282605,"url":"https://github.com/alcoceba/ngcarouseldirective","last_synced_at":"2025-05-07T04:24:59.171Z","repository":{"id":57308641,"uuid":"95374877","full_name":"alcoceba/ngCarouselDirective","owner":"alcoceba","description":"A simple NativeScript + Angular 4 images carousel for iOS and Android","archived":false,"fork":false,"pushed_at":"2019-05-18T09:31:30.000Z","size":13588,"stargazers_count":10,"open_issues_count":10,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-16T03:18:14.193Z","etag":null,"topics":["angular","angular-carousel","image-carousel","image-slider","nativescript-angular","nativescript-carousel","nativescript-plugin","nativescript-slides"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"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/alcoceba.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}},"created_at":"2017-06-25T17:23:38.000Z","updated_at":"2025-02-06T04:50:57.000Z","dependencies_parsed_at":"2022-08-29T04:52:41.618Z","dependency_job_id":null,"html_url":"https://github.com/alcoceba/ngCarouselDirective","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alcoceba%2FngCarouselDirective","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alcoceba%2FngCarouselDirective/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alcoceba%2FngCarouselDirective/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alcoceba%2FngCarouselDirective/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alcoceba","download_url":"https://codeload.github.com/alcoceba/ngCarouselDirective/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252811628,"owners_count":21807981,"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","angular-carousel","image-carousel","image-slider","nativescript-angular","nativescript-carousel","nativescript-plugin","nativescript-slides"],"created_at":"2024-09-30T14:31:31.940Z","updated_at":"2025-05-07T04:24:59.111Z","avatar_url":"https://github.com/alcoceba.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# {N} + Angular Carousel Slider\nA simple NativeScript + Angular images carousel for iOS and Android.\n\nTested on:\n\n* Nativescript 4\n* Typescript 3\n* Angular 6\n\nYou can download older versions [here](https://github.com/alcoceba/ngCarouselDirective/releases) for previous versions of Angular and Nativescript.\n\nI would appreciate any feedback as well as bug reporting, suggestions or changes - please create an issue.\n\n## Demo\n\nYou can check a [reference application here](https://github.com/alcoceba/ngCarouselDirectiveDemo) created to show how to integrate the \"{N} + Angular Carousel Slider\".\n\niOs                        |  Android\n:-------------------------:|:-------------------------:\n![](https://github.com/alcoceba/ngCarouselDirectiveDemo/blob/master/demo/ios.gif?raw=true)|![](https://github.com/alcoceba/ngCarouselDirectiveDemo/blob/master/demo/android.gif?raw=true)\n\n## Getting started\n\n[See demo](https://github.com/alcoceba/ngCarouselDirectiveDemo) for further details.\n\n1. Download and install the module via npm to your Nativescript project:\n\n\u003cpre\u003e\ncd your_tns_project_path/\nnpm install nativescript-ng2-carousel --save\n\u003c/pre\u003e\n\n2. Add the CarouselDirective class to the declarations NgMoudle metadata:\n\u003cpre\u003e\n@NgModule({\n    declarations: [AppComponent, CarouselDirective],\n    bootstrap: [AppComponent],\n    imports: [NativeScriptModule],\n    schemas: [NO_ERRORS_SCHEMA]\n})\n\u003c/pre\u003e\n\n3. To use the CarouselDirective, create a template that applies the directive as an attribute to a paragraph GridLayout element:\n\u003cpre\u003e\n\u0026lt;GridLayout [carousel]=\"images\" carouselLabelOverlay=\"true\" carouselSpeed=\"2000\"\u0026gt;\n    \n\u0026lt;/GridLayout\u0026gt;\n\u003c/pre\u003e\n\nAdd images **from URL** to your component:\n\u003cpre\u003e\n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array\u003cany\u003e = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', url: 'https://unsplash.it/400/300/?image=870' },\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n\u003c/pre\u003e\n\nYou can also add images from your **assets folder** or **resources folder** using `file` attribute instead of `url` attribute:\n\u003cpre\u003e\n@Component({\n    selector: \"my-app\",\n    templateUrl: \"app.component.html\"\n})\nexport class AppComponent {\n\n    protected images: Array\u003cany\u003e = [];\n\n    constructor() {\n        this.images = [\n            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },\n            { title: 'Image 2', file: '~/assets/sea-sunset.jpg' },\n            { title: 'Image 2', file: 'res://mountain' }, // Resource without extension\n            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },\n        ];\n    }\n}\n\u003c/pre\u003e\n\n\n4. CSS styling:\n\n\u003cpre\u003e\n/** Slider image */\n.slider-image {\n\n}\n\n/** Slider title format */\n.slider-title {\n    color: #fff;\n    font-weight: bold;\n    background-color: rgba(125, 125, 125);\n    padding: 8;\n    text-align: center;\n    vertical-align: bottom;\n}\n\n/** Arrows */\n.arrow {\n    color: #ffffff;\n    font-size: 32;\n    vertical-align: middle;\n    padding: 10;\n}\n\n/** Arrow left wrapper */\n.arrow.arrow-left {\n\n}\n\n/** Arrow right */\n.arrow.arrow-right {\n\n}\n\u003c/pre\u003e\n\n## Supported attributes\n\nCurrently directive supported attributes:\n\n* **carousel** list of images as JSON or CarouselSlide class, accepted parameters (title?, url?, file?)\n* **carouselSpeed** _(optional)_ defines the interval (number in ms) to wait before the next slide is shown \n* **carouselAnimationSpeed** _(optional)_ defines the animation speed (number in ms)\n* **carouselArrows** _(optional)_ arrow type, accepted values _none_, _small_, _normal_, _bold_ or _narrow_ (default _normal_)\n* **carouselLabelOverlay** _(optional)_ silde title over image, accepted values _true_ or _false_ (default false)\n\n## Changelog\n\n**Version 0.1.0**\n\n* Fix bug \"Unable to find directive\"\n* Demo folder moved https://github.com/alcoceba/ngCarouselDirectiveDemo\n* Improved documentation\n* Added requiered dependencies\n* Updated to Nativescript 4 + Angular 6\n\n**Version 0.0.5**\n\n* Possibility to load images from resources folder in Android and iOS\n\n**Version 0.0.4**\n\n* Updated to Nativescript 3 + Angular 4\n\n**Version 0.0.3**\n\n* Package.json fixes\n* Minor fixes","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falcoceba%2Fngcarouseldirective","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falcoceba%2Fngcarouseldirective","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falcoceba%2Fngcarouseldirective/lists"}