Skip to content

Commit 193ca89

Browse files
vdanylivvdanyliv
authored
Merge pull request #12 from vdanyliv/develop
0.0.6
2 parents 88c0dd3 + b355521 commit 193ca89

File tree

8 files changed

+113
-39
lines changed

8 files changed

+113
-39
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
npm-debug.log
3333
yarn-error.log
3434
testem.log
35+
.npmrc
3536
/typings
3637

3738
# System Files

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
22
"name": "ngx-tiny-slider-wrapper",
3-
"version": "0.0.2",
3+
"version": "0.0.6",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",
77
"build": "ng build",
88
"build:slider": "ng build ngx-tiny-slider && cp README.md ./projects/ngx-tiny-slider/dist/ngx-tiny-slider",
9+
"publish:slider": "npm publish projects/ngx-tiny-slider/dist/ngx-tiny-slider",
910
"test": "ng test",
1011
"lint": "ng lint",
1112
"e2e": "ng e2e"
@@ -23,9 +24,8 @@
2324
"@angular/router": "~7.0.0",
2425
"core-js": "^2.5.4",
2526
"rxjs": "~6.3.3",
26-
"tiny-slider": "^2.9.1",
2727
"zone.js": "~0.8.26",
28-
"ngx-tiny-slider": "0.0.3"
28+
"ngx-tiny-slider": "0.0.6"
2929
},
3030
"devDependencies": {
3131
"@angular-devkit/build-angular": "~0.10.0",

‎projects/ngx-tiny-slider/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.idea
2+
node_modules
3+
dist

‎projects/ngx-tiny-slider/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-tiny-slider",
3-
"version": "0.0.4",
3+
"version": "0.0.6",
44
"dependencies": {
55
"tiny-slider": "^2.9.1"
66
},

‎projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-instanse.interface.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {TinySliderInstance} from 'tiny-slider';
2+
import {ElementRef} from '@angular/core';
3+
4+
export interface NgxTinySliderInstance {
5+
sliderInstance: TinySliderInstance;
6+
slideItemsContainerRef: ElementRef;
7+
}

‎src/app/app.component.html‎

Lines changed: 72 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,73 @@
1-
<div class="component-wrapper">
2-
<ngx-tiny-slider [config]="tinySliderConfig">
3-
<ng-container class="items">
4-
<div class="item">
5-
<a target="_blank" href="google.com">
6-
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
7-
</a>
8-
</div>
9-
10-
<div class="item">
11-
<a target="_blank" href="google.com">
12-
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
13-
</a>
14-
</div>
15-
16-
<div class="item">
17-
<a target="_blank" href="google.com">
18-
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
19-
</a>
20-
</div>
21-
22-
<div class="item">
23-
<a target="_blank" href="google.com">
24-
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
25-
</a>
26-
</div>
27-
28-
<div class="item">
29-
<a target="_blank" href="google.com">
30-
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
31-
</a>
32-
</div>
33-
</ng-container>
34-
</ngx-tiny-slider>
1+
<div class="center">
2+
<b>Slider demo #1:</b>
3+
4+
<div class="mb-15 component-wrapper">
5+
<ngx-tiny-slider [config]="tinySliderConfig" #slider>
6+
<ng-container class="items">
7+
<div class="item">
8+
<a target="_blank" href="google.com">
9+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
10+
</a>
11+
</div>
12+
13+
<div class="item">
14+
<a target="_blank" href="google.com">
15+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
16+
</a>
17+
</div>
18+
19+
<div class="item">
20+
<a target="_blank" href="google.com">
21+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
22+
</a>
23+
</div>
24+
25+
<div class="item">
26+
<a target="_blank" href="google.com">
27+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
28+
</a>
29+
</div>
30+
31+
<div class="item">
32+
<a target="_blank" href="google.com">
33+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
34+
</a>
35+
</div>
36+
37+
<div class="item">
38+
<a target="_blank" href="google.com">
39+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
40+
</a>
41+
</div>
42+
43+
<div class="item">
44+
<a target="_blank" href="google.com">
45+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
46+
</a>
47+
</div>
48+
49+
<div class="item">
50+
<a target="_blank" href="google.com">
51+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
52+
</a>
53+
</div>
54+
55+
<div class="item">
56+
<a target="_blank" href="google.com">
57+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
58+
</a>
59+
</div>
60+
</ng-container>
61+
</ngx-tiny-slider>
62+
</div>
63+
<div class="mb-15">
64+
Custom controls:
65+
<div>
66+
Go to <button class="btn-black" (click)="next()">next</button>
67+
</div>
68+
69+
<div>
70+
Go to <button class="btn-black" (click)="prev()">prev</button>
71+
</div>
72+
</div>
3573
</div>

‎src/app/app.component.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.center {
2+
display: block;
3+
width: 50%;
4+
margin: 0 auto;
5+
}
6+
7+
.mb-15 {
8+
margin-bottom: 15px;
9+
}
10+
11+
.btn-black {
12+
background: black;
13+
color: #fff;
14+
cursor: pointer;
15+
}

‎src/app/app.component.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import {Component, OnInit} from '@angular/core';
1+
import {Component, OnInit, ViewChild} from '@angular/core';
22
import {NgxTinySliderSettingsInterface} from '../../projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-settings.interface';
3+
import {NgxTinySliderInstance} from '../../projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-instanse.interface';
34

45
@Component({
56
selector: 'app-root',
@@ -8,6 +9,7 @@ import {NgxTinySliderSettingsInterface} from '../../projects/ngx-tiny-slider/src
89
})
910
export class AppComponent implements OnInit {
1011
tinySliderConfig: NgxTinySliderSettingsInterface;
12+
@ViewChild('slider') slider: NgxTinySliderInstance;
1113

1214
ngOnInit() {
1315
this.tinySliderConfig = {
@@ -18,4 +20,12 @@ export class AppComponent implements OnInit {
1820
controlsText: ['<', '>']
1921
};
2022
}
23+
24+
next() {
25+
this.slider.sliderInstance.goTo('next');
26+
}
27+
28+
prev() {
29+
this.slider.sliderInstance.goTo('prev');
30+
}
2131
}

0 commit comments

Comments
 (0)