我是 Angular 的新手,我想制作在中心有事件项目的旋转木马,如下所示:
我读过 slick carousel for angular 2 or higher
我试图复制 example我已按照说明进行操作,但出现此错误:
ERROR TypeError: $(...).slick is not a function
- 我已添加模块并将其导入我的
app.module
我已经将 css 和 js 添加到
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" ],
这是我的模块:
...
import { SlickModule } from 'ngx-slick';
import { SliderComponent } from './home/slider/slider.component';
@NgModule({
declarations: [
... ,
SliderComponent,
],
imports: [
... ,
SlickModule.forRoot()
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule { }
这是我的观点:
<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>
这是我的组件:
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);
}
}
这是关于 typescript 中使用的jquery吗?
或者像我制作的 lul pic 一样给我一些轮播的引用。
最佳答案
将您的 slideConfig 替换为以下代码:
slideConfig = {
"slidesToShow": 1,
"slidesToScroll": 1,
"dots": true,
"infinite": true,
"autoplay": true,
"autoplaySpeed": 1500
};
关于angular - Angular 4 中的 ngx-slick 轮播不移动项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47631239/