valor-software/ngx-swiper-wrapper

Name: ngx-swiper-wrapper

Owner: Valor Software

Description: Angular 2 wrapper library for swiper

Forked from: cbdr/ngx-swiper-wrapper

Created: 2017-12-20 13:05:20.0

Updated: 2018-03-23 07:02:54.0

Pushed: 2017-10-27 13:12:35.0

Homepage: https://github.com

Size: 1846

Language: TypeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Angular Swiper Wrapper

This is an Angular wrapper library for the Swiper.

See a live example application here.

Building the library

install
run build
run inline

Running the example

xample
install
start

Installing and usage

install ngx-swiper-wrapper --save

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

rt { SwiperModule } from 'ngx-swiper-wrapper';
rt { SwiperConfigInterface } from 'ngx-swiper-wrapper';

t SWIPER_CONFIG: SwiperConfigInterface = {
rection: 'horizontal',
idesPerView: 'auto',
yboardControl: true


odule({
.
ports: [
...
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.

NOTE: Component provides default elements for scroller, pagination, prevButton and nextButton which you can enable by setting the apropriate configuration to 'true' (or to default swiper class). If you want to use custom components then you need use custom classes or preferably use the directive.

per [config]="config" [(index)]="index">
iv>
Swiper content
div>
iper>

avascript
ex]             // Can be used to set the active slide index.
fig]            // Custom config to override the global defaults.
abled]          // Disables changing of slides (locks the swiper).

SwiperClass]    // Use swiper class (needed by the default styles).

exChange)       // Event handler for the swiper index change event.

iper-event>)    // All swiper events / callbacks work as bindings.
                // Conflicting events are prefixed with 'swiper':
                // click, tap, doubleTap, touch*, transition*
                // Example: touchStart -> swiperTouchStart

DIRECTIVE USAGE

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

ort '~swiper/dist/css/swiper.min.css';

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

  class="swiper-container" [swiper]="config" [(index)]="index">
iv class="swiper-wrapper">
<div class="swiper-slide">
  Swiper content
</div>
div>

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

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

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

avascript
ex]             // Can be used to set the active slide index.
per]            // Can be used to provide optional custom config.
abled]          // Disables changing of slides (locks the swiper).

SwiperClass]    // Use swiper class (needed by the default styles).

exChange)       // Event handler for the swiper index change event.

iper-event>)    // All swiper events / callbacks work as bindings.
                // Conflicting events are prefixed with 'swiper':
                // click, tap, doubleTap, touch*, transition*
                // Example: touchStart -> swiperTouchStart

Available configuration options (custom / global configuration):

ction           // Direction of the swiper (Default: 'horizontal').
shold           // Distance needed for the swipe action (Default: 0).
eBetween        // Space in pixels between the swiper items (Default: 0).
esPerView       // Number of the items per view or 'auto' (Default: 1).
eredSlides      // Align active item on center not left (Default: false).
oardControl     // Enables navigation through arrow keys (Default: false).

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

Available control / helper functions (provided by the directive):

te(updateTranslate)           // Updates Swiper elements / classes /etc.

ndex()                        // Returns the current Swiper slide index.
ndex(index, speed?, silent?)  // Runs transition to slide with given index.

Slide(speed?, silent?)        // Runs transition to the next slide index.
Slide(speed?, silent?)        // Runs transition to the previous slide index.

Autoplay(reset?)              // Stops and optionally resets the autoplay.
tAutoplay(reset?)             // Starts and optionally resets the autoplay.

Above functions can be accessed through the directive reference (available as directiveRef in the component).