e:I[86069,["6841","static/chunks/app/p/%5Bid%5D/page-4bec94ee790807ae.js"],"default"] f:T7b9,$$config title: [프로젝트] Slick 설치/사용법 keywords: - IT - Slick Slider $$ ## slick 설치 - slick 설치 ```npm install react-slick``` - ccs를 포함한 기본 파일 다운로드 ```npm install slick-carousel``` - 커스터마이징 파일 ```import "slick-carousel/slick/slick.css";``` ```import "slick-carousel/slick/slick-theme.css";``` # 샘플 코드 ```js import React, { Component } from "react"; import Slider from "react-slick"; export default class SimpleSlider extends Component { render() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return (

Single Item

1

2

3

4

5

6

); } } ``` # style 커스터마이징 방법 node_modules 폴더 > slick-carousel 폴더 > slick 폴더 > slick.css / slick-theme.css (2개 css 파일을 복사하여 다른 폴더에 넣기) ** 선택사항 ★ 파일 위치 변경시 오류 발생, slick-theme 파일 수정필요, 아래 css 코드 주석처리 ```css .slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; } /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('./fonts/slick.eot'); src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick')