ngx-slick carousel in angular 4 is not moving item
13,918
Replace your slideConfig with below code:
slideConfig = {
"slidesToShow": 1,
"slidesToScroll": 1,
"dots": true,
"infinite": true,
"autoplay": true,
"autoplaySpeed": 1500
};
Related videos on Youtube
Author by
Arza
Updated on June 04, 2022Comments
-
Arza almost 2 years
I am new to angular and I want to make the carousel that have the active item in the center like this:
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
- I have added the module and imported it on my
app.module
-
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.-
Ray Luxembourg over 6 yearstry using swipper , it works very well for me. github.com/zefoy/ngx-swiper-wrapper
-
Arza over 6 yearsthanks ill try it then
-
Jonas Fu over 6 years
-
Stig Perez almost 5 yearsIf you are using
ng serve
to start your application, try terminating the process and restart withng serve
so that the changes in angular-cli.js are included
- I have added the module and imported it on my
-
Ghizlane Lotfi almost 6 yearsI still have the same problem