fredrik-macrobond / ng2-swiper

Angular 2 wrapper library for swiper

Angular 2 Swiper Wrapper

This is an Angular 2 wrapper library for swiper.

See a live example application here.

Building the library

npm install
npm run build

Running the example

cd example
npm install
npm start

Installing and usage

npm install angular2-swiper-wrapper --save-dev

Load the module for your app (with global configuration):

import { SwiperModule } from 'angular2-swiper-wrapper';
import { SwiperConfigInterface } from 'angular2-swiper-wrapper';

const SWIPER_CONFIG: SwiperConfigInterface = {
  direction: 'horizontal',
  slidesPerView: 'auto',
  keyboardControl: true
};

@NgModule({
  ...
  imports: [
    ...
    SwiperModule.forRoot(SWIPER_CONFIG)
  ]
})

Use it in your html template (with custom configuration):

  <swiper-view [config]="config" (indexChange)="onIndexChange($event)">
    <swiper-item>
      Swiper content
    </swiper-item>
  </swiper-view>

[config]         // Custom config to override the global defaults.

(indexChange)    // Event handler for the swiper index change.

Available configuration options (custom / global configuration):

direction        // Direction of the swiper (Default: 'horizontal').
threshold        // Distance needed for the swipe action (Default: 0).
spaceBetween     // Space in pixels between the swiper items (Default: 0).
slidesPerView    // Number of the items per view or 'auto' (Default: 1).
centeredSlides   // Align active item on center not left (Default: false).
keyboardControl  // Enables navigation through arrow keys (Default: false).

For more detailed documentation with all the supported options see swiper documentation.