Fall in IT.

angular5에서 slick-carousel사용법 본문

프레임워크/Angular Framework

angular5에서 slick-carousel사용법

D.Y 2018. 1. 11. 22:34


안녕하세요.


오늘은 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


Comments