title: ngx-slick carousel in angular 4 is not moving item
body: <p>I am new to angular and I want to make the carousel that have the active item in the center like this:
  <img src="https://i.stack.imgur.com/eEz4m.png" alt="lul pic"></p>
  
  <p>I have read about <a href="https://github.com/devmark/ngx-slick" rel="nofollow noreferrer">slick carousel for angular 2 or higher</a></p>
  
  <p>I have tried to copy the <a href="https://embed.plnkr.co/fblxzfPneL66950A4VDM/" rel="nofollow noreferrer">example</a> and I have followed the instruction but I am getting this error: </p>
  
  <blockquote>
    <p>ERROR TypeError: $(...).slick is not a function</p>
  </blockquote>
  
  <ol>
  <li>I have added the module and imported it on my <code>app.module</code></li>
  <li><p>I have added the css and the js to <code>angular-cli.json</code></p>
  
  <pre><code>"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "theme.scss",
  "../node_modules/font-awesome/css/font-awesome.css",
  "../node_modules/slick-carousel/slick/slick.css",
  "../node_modules/slick-carousel/slick/slick-theme.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/slick-carousel/slick/slick.js"
  ],
  </code></pre></li>
  </ol>
  
  <p>This is my module: </p>
  
  <pre><code>   ...
     import { SlickModule } from 'ngx-slick';
     import { SliderComponent } from './home/slider/slider.component';
  
  @NgModule({
    declarations: [
      ... ,
      SliderComponent,   
  
    ],
    imports: [
      ... ,
      SlickModule.forRoot()
  
     ],
    providers: [...],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>This is my view:</p>
  
  <pre><code>&lt;h2&gt;slider here &lt;/h2&gt;
  
  &lt;ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" 
  (afterChange)="afterChange($event)"&gt;
    &lt;div ngxSlickItem *ngFor="let slide of slides" class="slide"&gt;
      &lt;img src="{{ slide.img }}" alt="" width="100%"&gt;
    &lt;/div&gt;
  &lt;/ngx-slick&gt;
  
  &lt;button (click)="addSlide()"&gt;Add&lt;/button&gt;
  &lt;button (click)="removeSlide()"&gt;Remove&lt;/button&gt; 
  &lt;button (click)="slickModal.slickGoTo(2)"&gt;slickGoto 2&lt;/button&gt;
  &lt;button (click)="slickModal.unslick()"&gt;unslick&lt;/button&gt;
  </code></pre>
  
  <p>and this is my component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-slider',
    templateUrl: './slider.component.html',
    styleUrls: ['./slider.component.css']
  })
  export class SliderComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
    slides = [
      { img: 'http://placehold.it/350x150/000000' },
      { img: 'http://placehold.it/350x150/111111' },
      { img: 'http://placehold.it/350x150/222222' },
      { img: 'http://placehold.it/350x150/333333' },
      { img: 'http://placehold.it/350x150/444444' },
      { img: 'http://placehold.it/350x150/555555' }
    ];
  
    slideConfig = { 'slidesToShow': 4, 'slidesToScroll': 4 };
  
    addSlide() {
      this.slides.push({ img: 'http://placehold.it/350x150/666666' })
    }
  
    removeSlide() {
      this.slides.length = this.slides.length - 1;
    }
  
    afterChange(e) {
      console.log('afterChange', e);
    }
  }
  </code></pre>
  
  <p>Is this about the jquery that is used in typescript?<br>
  Or maybe give me some reference for the carousel just like the <em>lul pic</em> I made.</p>