diff --git a/README.MD b/README.MD index 3c3a3e4..10522e9 100644 --- a/README.MD +++ b/README.MD @@ -25,7 +25,7 @@ import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Import your library -import { SampleModule } from 'ngx-slick'; +import { SlickModule } from 'ngx-slick'; @NgModule({ declarations: [ @@ -35,7 +35,7 @@ import { SampleModule } from 'ngx-slick'; BrowserModule, // Specify your library as an import - LibraryModule + SlickModule.forRoot() ], providers: [], bootstrap: [AppComponent] @@ -43,16 +43,52 @@ import { SampleModule } from 'ngx-slick'; export class AppModule { } ``` +- Include jquery and slick css/js in your application : +``` + + + + +``` + Once your library is imported, you can use its components, directives and pipes in your Angular application: +```html + + +
+ +
+
+ + + + + +``` -```xml - -

- {{title}} -

- +```javascript + slides = [ + {img: "http://placehold.it/350x150/000000"}, + {img: "http://placehold.it/350x150/111111"}, + {img: "http://placehold.it/350x150/333333"}, + {img: "http://placehold.it/350x150/666666"} + ]; + slideConfig = {"slidesToShow": 4, "slidesToScroll": 4}; + + addSlide() { + this.slides.push({img: "http://placehold.it/350x150/777777"}) + } + + removeSlide() { + this.slides.length = this.slides.length - 1; + } + + afterChange(e) { + console.log('afterChange'); + } ``` + ## Development To generate all `*.js`, `*.d.ts` and `*.metadata.json` files: diff --git a/package.json b/package.json index 4bb3984..9eaba07 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/username/repo" + "url": "https://github.com/devmark/ngx-slick" }, "author": { "name": "Mark", @@ -24,7 +24,7 @@ ], "license": "MIT", "bugs": { - "url": "https://github.com/username/repo/issues" + "url": "https://github.com/devmark/ngx-slick/issues" }, "devDependencies": { "@angular/common": "^4.0.0", diff --git a/src/package.json b/src/package.json index 3e06f47..4d9b90d 100644 --- a/src/package.json +++ b/src/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "repository": { "type": "git", - "url": "https://github.com/username/repo" + "url": "https://github.com/devmark/ngx-slick" }, "author": { "name": "Mark", @@ -14,7 +14,7 @@ ], "license": "MIT", "bugs": { - "url": "https://github.com/username/repo/issues" + "url": "https://github.com/devmark/ngx-slick/issues" }, "module": "ngx-slick.js", "typings": "ngx-slick.d.ts", diff --git a/src/slick.component.ts b/src/slick.component.ts index 22c0748..3fb24fb 100755 --- a/src/slick.component.ts +++ b/src/slick.component.ts @@ -4,13 +4,11 @@ import { } from '@angular/core'; import {NG_VALUE_ACCESSOR} from '@angular/forms'; +declare var $:any; import {JQuerySlickOptions} from 'slick'; -declare var $: any; /** * Slick component - * Usage : - * */ @Component({ selector: 'ngx-slick',