Skip to content

Commit 98223e4

Browse files
vdanylivvdanyliv
authored
Merge pull request #1 from vdanyliv/develop
Develop
2 parents 7fe0f14 + ff48b33 commit 98223e4

14 files changed

+235
-74
lines changed

‎README.md‎

Lines changed: 63 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,72 @@
1-
# NgxTinySliderWrapper
1+
# ngx-tiny-slider
2+
Angular component that gives you possibility to use [tiny-slider](https://www.npmjs.com/package/tiny-slider) library.
3+
1. Demo [page](http://ganlanyuan.github.io/tiny-slider/demo/)
4+
2. tiny-slider official [repo](https://github.com/ganlanyuan/tiny-slider#readme)
25

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.3.
6+
# How to use
47

5-
## Development server
8+
1. Import NgxTinySliderModule into your module
9+
2. Use in your component template <ngx-tiny-slider>
610

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
11+
# Usage example
12+
Your component template
13+
```html
14+
<ngx-tiny-slider [config]="tinySliderConfig">
15+
<ng-container class="items">
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>
821

9-
## Code scaffolding
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>
1027

11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
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>
1233

13-
## Build
34+
<div class="item">
35+
<a target="_blank" href="google.com">
36+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
37+
</a>
38+
</div>
1439

15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
40+
<div class="item">
41+
<a target="_blank" href="google.com">
42+
<img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
43+
</a>
44+
</div>
45+
</ng-container>
46+
</ngx-tiny-slider>
47+
```
48+
49+
Your component defenition
50+
51+
```javascript
52+
@Component({
53+
selector: 'app-root',
54+
templateUrl: './app.component.html',
55+
styleUrls: ['./app.component.scss']
56+
})
57+
export class AppComponent implements OnInit {
58+
tinySliderConfig: NgxTinySliderSettingsInterface;
1659

17-
## Running unit tests
60+
ngOnInit() {
61+
this.tinySliderConfig = {
62+
arrowKeys: true,
63+
autoWidth: true,
64+
gutter: 10,
65+
centerNavigation: true,
66+
customControlsStyle: true,
67+
controlsText: ['<', '>'],
68+
};
69+
}
70+
}
1871

19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20-
21-
## Running end-to-end tests
22-
23-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24-
25-
## Further help
26-
27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
72+
```

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@angular/router": "~7.0.0",
2323
"core-js": "^2.5.4",
2424
"rxjs": "~6.3.3",
25+
"tiny-slider": "^2.9.1",
2526
"zone.js": "~0.8.26"
2627
},
2728
"devDependencies": {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{
22
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
33
"dest": "./dist/ngx-tiny-slider",
4+
"whitelistedNonPeerDependencies": [
5+
"tiny-slider"
6+
],
47
"lib": {
58
"entryFile": "src/public_api.ts"
69
}
7-
}
10+
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
{
22
"name": "ngx-tiny-slider",
33
"version": "0.0.1",
4+
"dependencies": {
5+
"tiny-slider": "^2.9.1"
6+
},
47
"peerDependencies": {
58
"@angular/common": "^7.0.0",
69
"@angular/core": "^7.0.0"
7-
}
10+
},
11+
"author": "Volodymyr Danyliv"
812
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {TinySliderSettings} from 'tiny-slider';
2+
3+
export interface NgxTinySliderSettingsInterface extends TinySliderSettings {
4+
centerNavigation?: boolean;
5+
customControlsStyle?: boolean;
6+
}

‎projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.component.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="slider-wrapper" [ngClass]="{'slider-wrapper-nav-center': config?.centerNavigation, 'slider-wrapper-custom-nav-style': config?.customControlsStyle}">
2+
<div class="slide-items" #slideItems>
3+
<ng-content select=".items"></ng-content>
4+
</div>
5+
</div>

‎projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.component.scss‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,40 @@
1-
@import "~tiny-slider/dist/tiny-slider.css";
1+
@import "~tiny-slider/dist/tiny-slider.css";
2+
3+
.slider-wrapper {
4+
&-nav-center {
5+
position: relative;
6+
padding: 0 28px;
7+
8+
.tns-controls {
9+
position: absolute;
10+
width: 100%;
11+
left: 0;
12+
top: 50%;
13+
14+
[data-controls*='next'] {
15+
right: 0;
16+
position: absolute;
17+
}
18+
19+
[data-controls*='prev'] {
20+
left: 0;
21+
position: absolute;
22+
}
23+
}
24+
}
25+
26+
&-custom-nav-style {
27+
.tns-controls {
28+
button {
29+
width: 25px;
30+
height: 25px;
31+
color: #fff;
32+
background: #808080;
33+
border-radius: 12px;
34+
padding: 0;
35+
font-size: 18px;
36+
outline: none;
37+
}
38+
}
39+
}
40+
}

‎projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.component.ts‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
1-
import {Component, OnInit, ViewChild} from '@angular/core';
1+
import {Component, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
22

33
import {NgxTinySliderService} from './ngx-tiny-slider.service';
44

55
@Component({
6-
selector: 'lib-ngx-tiny-slider',
7-
templateUrl: 'ngx-tiny-slider.component.ts',
8-
styleUrls: ['ngx-tiny-slider.component.scss']
6+
selector: 'ngx-tiny-slider',
7+
templateUrl: 'ngx-tiny-slider.component.html',
8+
styleUrls: ['ngx-tiny-slider.component.scss'],
9+
encapsulation: ViewEncapsulation.None
910
})
1011
export class NgxTinySliderComponent implements OnInit {
11-
@ViewChild('ref') containerRef;
12+
@Input() config;
13+
@ViewChild('slideItems') slideItemsContainerRef;
14+
15+
defaultConfig = this.ngxTinySliderService.getDefaultConfig();
1216

1317
constructor(private ngxTinySliderService: NgxTinySliderService) {
1418
}
1519

1620
ngOnInit() {
17-
this.ngxTinySliderService.initSlider(this.containerRef);
21+
this.extendConfig();
22+
this.initSlider();
23+
}
24+
25+
private extendConfig() {
26+
Object.keys(this.config).forEach(i => this.defaultConfig[i] = this.config[i]);
27+
}
28+
29+
private initSlider() {
30+
this.ngxTinySliderService.initSlider(this.defaultConfig, this.slideItemsContainerRef);
1831
}
1932
}

‎projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.module.ts‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
import {NgModule} from '@angular/core';
2+
import {CommonModule} from '@angular/common';
3+
24
import {NgxTinySliderComponent} from './ngx-tiny-slider.component';
5+
36
import {NgxTinySliderService} from './ngx-tiny-slider.service';
47

58
@NgModule({
6-
declarations: [
7-
NgxTinySliderComponent
8-
],
9-
imports: [
10-
NgxTinySliderService
11-
],
12-
exports: [
13-
NgxTinySliderComponent
14-
]
9+
imports: [
10+
CommonModule
11+
],
12+
declarations: [
13+
NgxTinySliderComponent
14+
],
15+
providers: [
16+
NgxTinySliderService
17+
],
18+
exports: [
19+
NgxTinySliderComponent
20+
]
1521
})
1622
export class NgxTinySliderModule {
1723
}

‎projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.service.ts‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Injectable} from '@angular/core';
2-
import {tns} from 'tiny-slider';
1+
import {ElementRef, Injectable} from '@angular/core';
2+
import {tns} from 'tiny-slider/src/tiny-slider';
33

44
@Injectable({
55
providedIn: 'root'
@@ -9,12 +9,17 @@ export class NgxTinySliderService {
99
constructor() {
1010
}
1111

12-
initSlider(elementRef) {
13-
return tns({
14-
container: elementRef,
12+
initSlider(config, elementRef: ElementRef) {
13+
return tns(Object.assign({container: elementRef.nativeElement}, config));
14+
}
15+
16+
getDefaultConfig() {
17+
return {
1518
items: 3,
16-
slideBy: 'page',
17-
autoplay: true
18-
});
19+
nav: false,
20+
mode: 'carousel',
21+
controlsPosition: 'bottom',
22+
speed: 400,
23+
};
1924
}
2025
}

0 commit comments

Comments
 (0)