2

I am new to angular and I want to make the carousel that have the active item in the center like this: lul pic

I have read about slick carousel for angular 2 or higher

I have tried to copy the example and I have followed the instruction but I am getting this error:

ERROR TypeError: $(...).slick is not a function

  1. I have added the module and imported it on my app.module

  2. I have added the css and the js to angular-cli.json

    "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"
],

This is my module: 

   ...
   import { SlickModule } from 'ngx-slick';
   import { SliderComponent } from './home/slider/slider.component';

@NgModule({
  declarations: [
    ... ,
    SliderComponent,   

  ],
  imports: [
    ... ,
    SlickModule.forRoot()

   ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is my view:

<h2>slider here </h2>

<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" 
(afterChange)="afterChange($event)">
  <div ngxSlickItem *ngFor="let slide of slides" class="slide">
    <img src="{{ slide.img }}" alt="" width="100%">
  </div>
</ngx-slick>

<button (click)="addSlide()">Add</button>
<button (click)="removeSlide()">Remove</button> 
<button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
<button (click)="slickModal.unslick()">unslick</button>

and this is my component:

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);
  }
}

Is this about the jquery that is used in typescript?
Or maybe give me some reference for the carousel just like the lul pic I made.

Richard Dallaway
  • 4,250
  • 1
  • 28
  • 39
Arza
  • 63
  • 2
  • 3
  • 10

3 Answers3

6

Replace your slideConfig with below code:

slideConfig = {
    "slidesToShow": 1,
    "slidesToScroll": 1,
    "dots": true,
    "infinite": true,
    "autoplay": true,
    "autoplaySpeed": 1500
};
Nadim Hossain Sonet
  • 1,630
  • 1
  • 16
  • 23
0
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/slick-carousel@1.6.0/slick/slick.js"></script>

Lib scripts you must move to index.html. In angular-cli.json it's not work :(

Eutrepe
  • 866
  • 1
  • 9
  • 9
0

I tried it , and got it working , Move its location to index.html and it will work.

  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/slick-carousel@1.6.0/slick/slick.js"></script>
Sarad Vishwakama
  • 95
  • 3