nativescript-ng2-carousel-swipeable
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.6 • Public • Published

    {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)
    • currentElementHighlightColor (recommended) background color to apply to the current element

    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

    Install

    npm i nativescript-ng2-carousel-swipeable

    DownloadsWeekly Downloads

    3

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    37.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar