Wondering what’s next for npm?Check out our public roadmap! »

    ng2-carouselamos
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published

    Ng2Carouselamos

    Ng2-carouselamos is a simple carousel/slider which just use css transitions to do the work

    Demo

    Demo

    Getting started

    • Install node package:
    npm i ng2-carouselamos --save
    

    And then, in your app.module.ts :

    import { Ng2CarouselamosModule } from 'ng2-carouselamos';
    ...
    @NgModule({
      ...
      imports: [
        ...
        Ng2CarouselamosModule
      ],
      ...
    })
    

    Documentation

    ng2-carouselamos - attribute to apply carousel

    startAt - initial slide to render. Defaults to 0.

    width - size of window to show

    items - objects array that belong to the carousel

    $item - template for each item

    $prev - template for previous button

    $next - template for next button

    onSelectedItem($event) - event triggered when snap element. $event is an object containing the current item and the current index - { item: ..., index: ... }

    Inside $item template we have access to the follow:

    • let-item - the current element of the objects array

    • let-i="index" - current index

    Implementing

    <div
      ng2-carouselamos
      [width]="500"
      [items]="[
        { name: 'Alice'},
        { name: 'Bob'},
        { name: 'John Doe'},
        { name: 'Jane Doe'}
      ]"
      [$item]="itemTemplate"
      [$prev]="prevTemplate"
      [$next]="nextTemplate"
      (onSelectedItem)="selectedItem = $event.item; selectedIndex = $event.index"
    ></div>
     
    <div>
      Current item selected <br />
      {{ selectedIndex }} - {{ selectedItem }}
    </div>
     
    <ng-template #prevTemplate>
      <span>Previous</span>
    </ng-template>
     
    <ng-template #nextTemplate>
      <span>next</span>
    </ng-template>
     
    <ng-template let-item let-i="index" #itemTemplate>
      <div style="min-width: 200px">
        <b *ngIf="i === selectedIndex">{{i}}. {{item.name}}</b>
        <span *ngIf="i !== selectedIndex">{{i}}. {{item.name}}</span>
      </div>
    </ng-template>

    Based on @angular/cli(https://angular.io/guide/creating-libraries)

    Install

    npm i ng2-carouselamos

    DownloadsWeekly Downloads

    712

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    138 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar