Angular之Silck應用

slick 是一個基於 jQuery 的響應觸控式幻燈片外掛，支援IE8+，Chrome, Firefox, and Safari，具有以下特點：

支援響應式瀏覽器支援 CSS3 時，則使用 CSS3 過度/動畫支援移動裝置滑動支援桌面瀏覽器滑鼠拖動支援迴圈支援左右控制支援動態新增、刪除、過濾支援自動播放、圓點、箭頭、回撥等等

官方地址：

http://kenwheeler.github.io/slick/

他的功能之強大，使用靈活我這邊就不再複述，官網或google下都有很多文章。

這邊主要說明下他在Angular中的使用。

方案一：直接使用ngx-slick-carousel

該方案直接使用github上對應的元件使用。經測試他可以同時支援Angualr6 ~ Angular 11。

ps.畢竟有人直接開發了，這邊也就不再重複製造軲轆了~

對於不想引入過多元件的同學，可以瞭解下Angular中使用js相關的文章 。

Step 1:建立工程

ng new slickCarouselPro

Step 2 :引入必要元件

$ npm install jquery --save$ npm install slick-carousel --save$ npm install ngx-slick-carousel --save

Step 3 : AppModule中引入

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';// Import your libraryimport { SlickCarouselModule } from 'ngx-slick-carousel';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    // Specify your library as an import    SlickCarouselModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Step 4： Angular.json 中引入

 "styles": [    ...    "node_modules/slick-carousel/slick/slick.scss",    "node_modules/slick-carousel/slick/slick-theme.scss",    ...  ]