Skip to content

Commit

Permalink
added new service for reset and moveToSlide functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
sheikalthaf committed Jan 26, 2018
1 parent c5d83a9 commit 65ef06a
Show file tree
Hide file tree
Showing 10 changed files with 497 additions and 137 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ dist

# OS generated files
Thumbs.db
.DS_Store
.DS_Store
.vscode
40 changes: 34 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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: [`
Expand Down Expand Up @@ -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];

Expand All @@ -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
Expand Down
3 changes: 2 additions & 1 deletion index.ts
Original file line number Diff line number Diff line change
@@ -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';
211 changes: 211 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngu-carousel",
"version": "1.4.2",
"version": "1.4.5",
"description": "Angular Universal carousel",
"scripts": {
"transpile": "ngc ",
Expand Down Expand Up @@ -29,4 +29,4 @@
"@angular/core": ">=4.0.0",
"@angular/platform-browser": ">=4.0.0"
}
}
}
42 changes: 24 additions & 18 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -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'
}
};
Loading

0 comments on commit 65ef06a

Please sign in to comment.