NativeScript Pager

Install

tns plugin add nativescript-pager

Usage

IMPORTANT: Make sure you include xmlns:pager="nativescript-pager" on the Page element any element can be used in the pager

<pager:Pager items="{{items}}" row="2" id="pager" pagesCount="10" showNativePageIndicator="false" backgroundColor="lightsteelblue">
            <pager:Pager.itemTemplate>
                <GridLayout rows="auto, *" columns="*" backgroundColor="red">
                    <Label text="{{title}}"/>
                    <Image row="1" src="{{image}}"/>
                </GridLayout>
            </pager:Pager.itemTemplate>
</pager:Pager>

AngularNative

import { PagerModule } from "nativescript-pager/angular";

@NgModule({
    imports: [
    PagerModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

Angular v2

<Pager [items]="items" #pager [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="onIndexChanged($event)" class="pager">
        <template pagerItemTemplate let-i="index" let-item="item">
            <GridLayout class="pager-item" rows="auto, *" columns="*" backgroundColor="red">
                <Label  [text]="item.title"></Label>
                <Image row="1" [src]="item.image"></Image>
            </GridLayout>
        </template>
    </Pager>

Angular v4

<Pager [items]="items" #pager [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="onIndexChanged($event)" class="pager">
        <ng-template pagerItemTemplate let-i="index" let-item="item">
            <GridLayout class="pager-item" rows="auto, *" columns="*" backgroundColor="red">
                <Label  [text]="item.title"></Label>
                <Image row="1" [src]="item.image"></Image>
            </GridLayout>
        </ng-template>
    </Pager>

Config

<Pager disableSwipe="true" selectedIndex="5" transformer="FlipHorizontalTransformer">

Transformations

• AccordionTransformer
• BackgroundToForegroundTransformer
• CubeInTransformer
• CubeOutTransformer
• DefaultTransformer
• DepthPageTransformer
• DrawFromBackTransformer
• FlipHorizontalTransformer
• FlipVerticalTransformer
• ForegroundToBackgroundTransformer
• ParallaxPageTransformer
• RotateDownTransformer
• RotateUpTransformer
• StackTransformer
• TabletTransformer
• ZoomInTransformer
• ZoomOutSlideTransformer
• ZoomOutTranformer

Android