슬라이드 라이브러리 사용 후기
- 원래 의도는 직접 구현하려 했으나 코딩하다 보니 어려운 점 및 시간이 너무 소요 될 것 같아 1차 프로젝트는 일단 Slick 라이브러리를 사용하기로 했다
Slick 사용 방법
- 위의 공식 사이트를 참조 하면서 따라하시기 바랍니다.
1. 사용하기 전 필요한 CSS 로더 및 npm 설치
index.html 파일 // css 로더
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
npm install react-slick --save
npm install slick-carousel --save
import "~slick-carousel/slick/slick.css";
import "~slick-carousel/slick/slick-theme.css";
사용법에는 이것을 import 하라고 하는데 나는 작성 안했는데 잘 돌아갔음
2. 본인이 사용하고 싶은 slide를 선택하여 속성에 맞게 사용
- 나는 Custom Paging, Responsive 두가지를 사용했다.
const mainSettings = {
customPaging: function(i) {
return (
<div>
<img alt="thumbnail" src={images[i].main_url} />
</div>
);
},
dots: true,
dotsClass: "slick-dots slick-thumb",
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const collectionSettings = {
dots: false,
infinite: false,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
initialSlide: 0,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
3. 속성을 슬라이더에 적용
<Slider ref={ref => (this.slider = ref)} {...mainSettings}>
{window.innerHeight <= 800
? this.mapOfMainImg(images.slice(0, 8))
: this.mapOfMainImg(images.slice(0, 10))}
</Slider>
<Slider {...collectionSettings} ref={ref => (this.collection = ref)}>
{this.mapOfCollection(images.slice(10, 15))}
<div className="collection_more">더 보기</div>
</Slider>
4. 본인의 디자인 설정대로 커스텀하기
- 사실 이 부분이 가장 어려웠다. 개발자도구를 켜서 계속 비교하면서 설정해줘야 하는데 굉장히 까다로운 부분이였다.
- 이 부분은 따로 설명이 필요하지 않고 클래스를 이용해 선택자를 잘 이용하여 커스텀 하기를 바란다.