added new service for reset and moveToSlide functionality

Author: sheikalthaf

.gitignore

@@ -7,4 +7,5 @@ dist
 
 # OS generated files
 Thumbs.db
-.DS_Store
+.DS_Store
+.vscode

README.md

@@ -103,7 +103,7 @@ export class SampleComponent implements OnInit {
 export class NguCarouselStore {
   type: string;
   deviceType: DeviceType;
-  classText: string;
+  token: string;
   items: number;
   load: number;
   deviceWidth: number;
@@ -206,18 +206,30 @@ This is HTML I'm using in the carousel. Add your own css according to this eleme
 
 <ngu-carousel
       [inputs]="carouselBanner"
-      [moveToSlide]="2"
+      (initData)="initDataFn($event)"
       (onMove)="onmoveFn($event)"
       (carouselLoad)="loadItemsFn()">
 </ngu-carousel>
 
 ```
 
 * `inputs` is an `Input` and It accepts `NguCarousel`.
-* `moveToSlide` is an `Input` which accepts point numbers. Numbers represents no of slide to be done.
+* `initData` is an `Output` which triggered on carousel init and it emits token to exchange with service to contol the carousel.
 * `onMove` is an `Output` which triggered on every slide before start and it will emit `$event` as `NguCarouselStore` object.
 * `carouselLoad` is an `Output` which triggered when slide reaches the end on items based on inputs `load`.
 
+
+##Carousel Service
+
+```javascript
+import { NguCarouselService } from '@ngu/carousel';
+```
+This carousel Service supports:
+
+* `reset(token)` - This function will reset the carousel
+* `moveToSlide(token, index, animate)` - This function is used to move to index with animation control.
+
+
 # Getstarted guide
 
 ## Banner with Custom point style
@@ -231,7 +243,6 @@ import { NguCarousel, NguCarouselStore } from '@ngu/carousel';
   template: `
     <ngu-carousel
       [inputs]="carouselBanner"
-      [moveToSlide]="1"
       (onMove)="onmoveFn($event)">
 
           <ngu-item NguCarouselItem class="bannerStyle">
@@ -337,17 +348,18 @@ export class Sample implements OnInit {
 
 ```
 
-## Tile
+## Tile with Service
 
 ```javascript
 import { Component } from '@angular/core';
-import { NguCarousel } from '@ngu/carousel';
+import { NguCarousel, NguCarouselStore, NguCarouselService } from '@ngu/carousel';
 
 @Component({
   selector: 'app-carousel',
   template: `
     <ngu-carousel
       [inputs]="carouselTile"
+      (initData)="initDataFn($event)"
       (carouselLoad)="carouselTileLoad($event)">
 
             <ngu-tile NguCarouselItem *ngFor="let Tile of carouselTileItems">
@@ -357,6 +369,7 @@ import { NguCarousel } from '@ngu/carousel';
           <button NguCarouselPrev class='leftRs'>&lt;</button>
           <button NguCarouselNext class='rightRs'>&gt;</button>
     </ngu-carousel>
+    <button (click)="resetFn()">Reset</button>
   `,
   styles: [`
 
@@ -392,10 +405,13 @@ import { NguCarousel } from '@ngu/carousel';
   `]
 })
 export class Sample implements OnInit {
+  private carouselToken: string;
 
   public carouselTileItems: Array<any>;
   public carouselTile: NguCarousel;
 
+  constructor(private carousel: NguCarouselService) {  }
+
   ngOnInit(){
     this.carouselTileItems = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
 
@@ -413,6 +429,18 @@ export class Sample implements OnInit {
     }
   }
 
+  initDataFn(key: NguCarouselStore) {
+    this.carouselToken = key.token;
+  }
+
+  resetFn() {
+    this.carousel.reset(this.carouselToken);
+  }
+
+  moveToSlide() {
+    this.carousel.moveToSlide(this.carouselToken, 2, false);
+  }
+
   public carouselTileLoad(evt: any) {
 
     const len = this.carouselTileItems.length

index.ts

@@ -1,2 +1,3 @@
 export { NguCarouselModule } from './src/ngu-carousel.module';
-export { NguCarousel, NguCarouselStore } from './src/ngu-carousel/ngu-carousel.interface';
+export { NguCarousel, NguCarouselStore } from './src/ngu-carousel/ngu-carousel.interface';
+export { NguCarouselService } from './src/ngu-carousel.service';

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "ngu-carousel",
-    "version": "1.4.2",
+    "version": "1.4.5",
     "description": "Angular Universal carousel",
     "scripts": {
         "transpile": "ngc ",
@@ -29,4 +29,4 @@
         "@angular/core": ">=4.0.0",
         "@angular/platform-browser": ">=4.0.0"
     }
-}
+}

package.json

@@ -1,19 +1,25 @@
 export default {
-    entry: 'dist/index.js',
-    dest: 'dist/bundles/ngucarousel.umd.js',
-    sourceMap: false,
-    format: 'umd',
-    moduleName: 'ng.ngucarousel',
-    external: ['@angular/core', '@angular/common', '@angular/platform-browser'],
-    globals: {
-        '@angular/core': 'ng.core',
-        '@angular/common': 'ng.common',
-        '@angular/platform-browser': 'ng.platform-browser',
-        'rxjs/Observable': 'Rx',
-        'rxjs/ReplaySubject': 'Rx',
-        'rxjs/add/operator/map': 'Rx.Observable.prototype',
-        'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
-        'rxjs/add/observable/fromEvent': 'Rx.Observable',
-        'rxjs/add/observable/of': 'Rx.Observable'
-    }
-}
+  entry: 'dist/index.js',
+  dest: 'dist/bundles/ngucarousel.umd.js',
+  sourceMap: false,
+  format: 'umd',
+  moduleName: 'ng.ngucarousel',
+  external: [
+    '@angular/core',
+    '@angular/common',
+    '@angular/platform-browser',
+    'rxjs/Subject'
+  ],
+  globals: {
+    '@angular/core': 'ng.core',
+    '@angular/common': 'ng.common',
+    '@angular/platform-browser': 'ng.platform-browser',
+    'rxjs/Observable': 'Rx',
+    'rxjs/Subject': 'Rx',
+    'rxjs/ReplaySubject': 'Rx',
+    'rxjs/add/operator/map': 'Rx.Observable.prototype',
+    'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
+    'rxjs/add/observable/fromEvent': 'Rx.Observable',
+    'rxjs/add/observable/of': 'Rx.Observable'
+  }
+};