/ngCarouselDirective

A simple NativeScript + Angular 4 images carousel for iOS and Android

Primary LanguageTypeScript

{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 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 created to show how to integrate the "{N} + Angular Carousel Slider".

iOs Android

Getting started

See demo 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
  1. Add the CarouselDirective class to the declarations NgMoudle metadata:
@NgModule({
    declarations: [AppComponent, CarouselDirective],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
    schemas: [NO_ERRORS_SCHEMA]
})
  1. 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' },
        ];
    }
}
  1. 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

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