diff --git a/README.md b/README.md index c72b798..c14141b 100644 --- a/README.md +++ b/README.md @@ -3,14 +3,68 @@ Angular component that gives you possibility to use tiny slider library. 1. Demo [page](http://ganlanyuan.github.io/tiny-slider/demo/) # How to use -1. Import NgxTinySliderModule into your module -2. Use in your component template +1. npm i ngx-tiny-slider +2. Import NgxTinySliderModule into your shared / root module +3. Use in your component template use # Whats new on 0.0.4? 1. Added component OnDestroy hook, that will handle slider instance destroying # Usage example -Your component template +Your module defenition example +```javascript +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; + +import {AppComponent} from './app.component'; +import {NgxTinySliderModule} from 'ngx-tiny-slider'; + +@NgModule({ + imports: [ + BrowserModule, + NgxTinySliderModule + ], + declarations: [ + AppComponent + ], + exports: [ + NgxTinySliderModule + ], + providers: [], + bootstrap: [ + AppComponent + ] +}) +export class AppModule { +} +``` + +Your component defenition example + ```javascript +import {Component, OnInit} from '@angular/core'; +import {NgxTinySliderSettingsInterface} from 'ngx-tiny-slider'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent implements OnInit { + tinySliderConfig: NgxTinySliderSettingsInterface; + + ngOnInit() { + this.tinySliderConfig = { + arrowKeys: true, + autoWidth: true, + gutter: 10, + controlsText: ['<', '>'] + }; + } +} + + ``` + +Your component template example ```html @@ -47,32 +101,5 @@ Your component template ``` -Your component defenition - - ```javascript -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] -}) -export class AppComponent implements OnInit { - tinySliderConfig: NgxTinySliderSettingsInterface; - - ngOnInit() { - this.tinySliderConfig = { - arrowKeys: true, - autoWidth: true, - gutter: 10, - controlsText: ['<', '>'] - }; - } -} - - ``` - # Additional options 1. domReady {Subject} - provide possibility to initialize component manually - - #### Deprecated and removed (use tiny-slider options in case if you need extra customisation) - 1. customControlsStyle {Boolean} - Custom component style - 2. centerNavigation {Boolean} - Navigation on center of the slider container