# nativescript-ng2-carousel > A simple NativeScript + Angular images carousel for iOS and Android Latest version **0.1.0** (published 2018-08-19) · MIT license · 0 weekly downloads ## Install ```sh npm install nativescript-ng2-carousel pnpm add nativescript-ng2-carousel yarn add nativescript-ng2-carousel bun add nativescript-ng2-carousel ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.0 | | Published | 2018-08-19 | | First published | 2017-06-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 20.7 KB | | Known vulnerabilities | 0 (+8 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 10 | | Author | Manel Alcoceba | | Maintainers | alcoceba | | Keywords | angular, nativescript, carousel, images, slides, slide, slider, gallery, ng, typescript, angular4, angular5, angular6 | ## Links - npm: https://www.npmjs.com/package/nativescript-ng2-carousel - Repository: https://github.com/alcoceba/ngCarouselDirective - Homepage: https://github.com/alcoceba/ngCarouselDirective#readme - Issues: https://github.com/alcoceba/ngCarouselDirective/issues - npm.io page: https://npm.io/package/nativescript-ng2-carousel ## Dependencies (4) - [rxjs](https://npm.io/package/rxjs.md) ^6.0.0 - [zone.js](https://npm.io/package/zone.js.md) ^0.8.0 - [@angular/core](https://npm.io/package/@angular/core.md) ^6.0.0 - [tns-core-modules](https://npm.io/package/tns-core-modules.md) ^4.0.0 ## Alternatives - [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads - [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads - [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads - [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads - [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads ## Recent versions - 0.1.0 (latest) — 2018-08-19 - 0.0.6 — 2018-08-19 - 0.0.5 — 2017-10-07 - 0.0.4 — 2017-07-31 - 0.0.3 — 2017-07-14 - 0.0.2 — 2017-06-25 - 0.0.1 — 2017-06-25 ## README # {N} + Angular Carousel Slider A simple NativeScript + Angular images carousel for iOS and Android. Tested on: * Nativescript 4 * Typescript 3 * Angular 6 You can download older versions [here](https://github.com/alcoceba/ngCarouselDirective/releases) for previous versions of Angular and Nativescript. I would appreciate any feedback as well as bug reporting, suggestions or changes - please create an issue. ## Demo You can check a [reference application here](https://github.com/alcoceba/ngCarouselDirectiveDemo) created to show how to integrate the "{N} + Angular Carousel Slider". iOs | Android :-------------------------:|:-------------------------: ![](https://github.com/alcoceba/ngCarouselDirectiveDemo/blob/master/demo/ios.gif?raw=true)|![](https://github.com/alcoceba/ngCarouselDirectiveDemo/blob/master/demo/android.gif?raw=true) ## Getting started [See demo](https://github.com/alcoceba/ngCarouselDirectiveDemo) for further details. 1. Download and install the module via npm to your Nativescript project: 
cd your_tns_project_path/
npm install nativescript-ng2-carousel --save
2. Add the CarouselDirective class to the declarations NgMoudle metadata: 
@NgModule({
    declarations: [AppComponent, CarouselDirective],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
    schemas: [NO_ERRORS_SCHEMA]
})
3. To use the CarouselDirective, create a template that applies the directive as an attribute to a paragraph GridLayout element: 
<GridLayout [carousel]="images" carouselLabelOverlay="true" carouselSpeed="2000">
    
</GridLayout>
Add images **from URL** to your component: 
@Component({
    selector: "my-app",
    templateUrl: "app.component.html"
})
export class AppComponent {

    protected images: Array = [];

    constructor() {
        this.images = [
            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },
            { title: 'Image 2', url: 'https://unsplash.it/400/300/?image=870' },
            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },
        ];
    }
}
You can also add images from your **assets folder** or **resources folder** using `file` attribute instead of `url` attribute: 
@Component({
    selector: "my-app",
    templateUrl: "app.component.html"
})
export class AppComponent {

    protected images: Array = [];

    constructor() {
        this.images = [
            { title: 'Image 1', url: 'https://unsplash.it/400/300/?image=867' },
            { title: 'Image 2', file: '~/assets/sea-sunset.jpg' },
            { title: 'Image 2', file: 'res://mountain' }, // Resource without extension
            { title: 'Image 3', url: 'https://unsplash.it/400/300/?image=876' },
        ];
    }
}
4. CSS styling: 
/** Slider image */
.slider-image {

}

/** Slider title format */
.slider-title {
    color: #fff;
    font-weight: bold;
    background-color: rgba(125, 125, 125);
    padding: 8;
    text-align: center;
    vertical-align: bottom;
}

/** Arrows */
.arrow {
    color: #ffffff;
    font-size: 32;
    vertical-align: middle;
    padding: 10;
}

/** Arrow left wrapper */
.arrow.arrow-left {

}

/** Arrow right */
.arrow.arrow-right {

}
## Supported attributes Currently directive supported attributes: * **carousel** list of images as JSON or CarouselSlide class, accepted parameters (title?, url?, file?) * **carouselSpeed** _(optional)_ defines the interval (number in ms) to wait before the next slide is shown * **carouselAnimationSpeed** _(optional)_ defines the animation speed (number in ms) * **carouselArrows** _(optional)_ arrow type, accepted values _none_, _small_, _normal_, _bold_ or _narrow_ (default _normal_) * **carouselLabelOverlay** _(optional)_ silde title over image, accepted values _true_ or _false_ (default false) ## Changelog **Version 0.1.0** * Fix bug "Unable to find directive" * Demo folder moved https://github.com/alcoceba/ngCarouselDirectiveDemo * Improved documentation * Added requiered dependencies * Updated to Nativescript 4 + Angular 6 **Version 0.0.5** * Possibility to load images from resources folder in Android and iOS **Version 0.0.4** * Updated to Nativescript 3 + Angular 4 **Version 0.0.3** * Package.json fixes * Minor fixes --- _Source: https://npm.io/package/nativescript-ng2-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._