nnc

nativescript-ng2-carousel

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

Showing:

Popularity

Downloads/wk

2

GitHub Stars

9

Maintenance

Last Commit

3yrs ago

Contributors

0

Package

Dependencies

4

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

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 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".

iOsAndroid

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]
    })
    
  2. 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial