ngx-swiper-wrapper

November 04, 2017
This is an Angular wrapper library for the 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 ngx-swiper-wrapper --save  

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

 import { SwiperModule } from 'ngx-swiper-wrapper';  
 import { SwiperConfigInterface } from 'ngx-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.
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.
 <swiper [config]="config" [(index)]="index">  
  <div>  
   Swiper content  
  </div>  
 </swiper>  
 [index]       // Can be used to set the active slide index.  
 [config]      // Custom config to override the global defaults.  
 [disabled]     // Disables changing of slides (locks the swiper).  
 [useSwiperClass]  // Use swiper class (needed by the default styles).  
 (indexChange)    // Event handler for the swiper index change event.  
 (<swiper-event>)  // All swiper events / callbacks work as bindings.  
           // Conflicting events are prefixed with 'swiper':  
           // click, tap, doubleTap, touch*, transition*  

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 class="swiper-container" [swiper]="config" [(index)]="index">  
  <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>  
 [index]       // Can be used to set the active slide index.  
 [swiper]      // Can be used to provide optional custom config.  
 [disabled]     // Disables changing of slides (locks the swiper).  
 [useSwiperClass]  // Use swiper class (needed by the default styles).  
 (indexChange)    // Event handler for the swiper index change event.  
 (<swiper-event>)  // All swiper events / callbacks work as bindings.  
           // Conflicting events are prefixed with 'swiper':  
           // click, tap, doubleTap, touch*, transition*  

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 events / options see swiper documentation.

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

 update(updateTranslate)      // Updates Swiper elements / classes /etc.  
 getIndex()            // Returns the current Swiper slide index.  
 setIndex(index, speed?, silent?) // Runs transition to slide with given index.  
 nextSlide(speed?, silent?)    // Runs transition to the next slide index.  
 prevSlide(speed?, silent?)    // Runs transition to the previous slide index.  
 stopAutoplay(reset?)       // Stops and optionally resets the autoplay.  
 startAutoplay(reset?)       // Starts and optionally resets the autoplay.  
Above functions can be accessed through the directive reference (available as directiveRef in the component).
Note: Special thanks to ZEF Oy
Contact: info@zef.fi
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

No comments