@tmfs/ngx-swiper v1.0.1

Angular Swiper

This library is a general-purpose, lightweight and dependency-free swiper to be used in Angular applications.
By default, you can pass an array of images url to the items property to have a fully working images swiper. To improve the performances, the swiper uses the OnPush change detection strategy and the images are lazy loaded.

If this behavior, or the usage of images, does not suit your needs, you can pass any kind of item to the items property and customize the slides with a ng-template passed to the slideTemplate property.

Installation

$ npm install --save @tmfs/ngx-swiper

Or, if you're using Yarn

$ yarn add @tmfs/ngx-swiper

Then add the module NgxSwiperModule to your application.

Usage

<ngx-swiper
  [items]="items"
  [navigation]="false"
  [pagination]="false"
  [infinite]="true"
  [loop]="5000"
  [slideTemplate]="slideTemplate"
  [navigationButtonTemplate]="navigationTemplate"
  [paginationTemplate]="paginationTemplate"
  [transitionDuration]="400"
  [threshold]="30"
>
</ngx-swiper>

<ng-template #slideTemplate let-item>
  <!-- YOUR CUSTOM SLIDE -->
</ng-template>

<ng-template #navigationTemplate>
  <!-- YOUR CUSTOM NAVIGATION BUTTON -->
</ng-template>

<ng-template #paginationTemplate>
  <!-- YOUR CUSTOM PAGINATION -->
</ng-template>