angular5에서 slick-carousel사용법

안녕하세요.

오늘은 Angular5에서 Slick-carousel 사용법에 대해서 알아보겠습니다.

목적

• Angular5에서 slick-carousel 사용해보기

작업 순서

1. angular-cli를 사용하여 angular5 프로젝트를 생성하고 실행해봅니다.
2. 생성한 프로젝트에 slick-carousel 플러그인을 설치하고 적용합니다.

angular5 프로젝트 생성 및 실행
(node.js, npm, angular-cli가 설치되어 있다는 가정하에 설명합니다.)

• angular-cli를 사용하여, angular5 project를 생성합니다. 프로젝트명은 slick-sample-app으로 합니다.
  - $ ng new slick-sample-app 
• 프로젝트가 생성되면 해당 프로젝트 안으로 진입합니다.
  - $ cd slick-sample-app
• npm 명령어를 사용하여 실행에 필요한 패키지를 설치합니다.
  - $ npm i (npm install 명령과 동일)
• 아래 명령어를 사용하여 angular-cli로 생성한 프로젝트를 실행합니다.
  - $ ng serve
  
  
  
  

Slick-carousel 설치 및 적용

• 아래 명령어를 사용하여 slick-carousel을 설치합니다.
  - $ npm install slick-carousel --save
  - $ npm install --save @types/slick-carousel
  (둘 중 하나만 인스톨할 경우 에러가 발생합니다. 반드시 2개 모두 설치해야 합니다.)
  
  
• slick-carousel의 기본 css를 적용하기위해 index.html 헤더에 css를 import 합니다.
  
  
  
  
• app.component.html / app.component.css를 원하는대로 수정합니다.
  
  (app.component.html)
  
  
  
  (app.component.css)
  
  

• app.component.ts에서 slick-carousel을 적용할 element를 jquery를 사용하여 select한 후, slick() 메소드를 적용합니다.
  - 주의할 점은, constructor에서 slick() 메소드를 적용할 경우 에러가 발생합니다. ngOnInit()메소드에서 적용해야 합니다. 
  

  
  
  
  
• 결과
  

참조

• https://www.npmjs.com/package/@types/slick-carousel
• https://github.com/kenwheeler/slick