angular2-swiper-wrapper

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):

This library provides two ways to create a Swiper element, simple component and custom directive.

COMPONENT USAGE

Simply replace the element that would oridinarily be passed to Swiper with the swiper component.

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

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

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

[runInsideAngular]  // Run Swiper function calls inside the angular zone.

DIRECTIVE USAGE

When using only the directive you need to provide your own theming or import the default theme:

@import 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/css/swiper.min.css';

Swiper directive can be used in correctly structured div element with optional custom configuration:

<div [swiper]="config" class="swiper-container" (indexChange)="onIndexChange($event)">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Swiper content
    </div>
  </div>

  <div class="swiper-scrollbar"></div>

  <div class="swiper-pagination"></div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

[swiper]            // Can be used to provide optional custom config.

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

[runInsideAngular]  // Run Swiper function calls inside the angular zone.

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.