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>

| Property | Default | Description | | ------------------------ | ---------- | ----------------------------------------------------------------------- | | items | required | The array of items to display in the swiper | | navigation | false | Whether to display the navigation arrows | | pagination | false | Whether to display the pagination dots | | infinite | true | Allow to navigate between slides indefinitely | | loop | undefined | The number of milliseconds a slide stays before sliding to the next one | | slideTemplate | undefined | A custom template to replace the default slide template | | navigationButtonTemplate | undefined | A custom template for the navigation button | | paginationTemplate | undefined | A custom template for the pagination at the bottom of the swiper | | transitionDuration | 400 | The time in milliseconds for the Swiper transitions | | threshold | 30 | The number of px that must be swiped before going to next/prev slide |