(TIL 30일차) 스타일쉐어 1차 프로젝트 OOTD (4)

빡기·2020년 2월 27일

Slick TIL 스타일쉐어

TIL(Today I Learned)

목록 보기

26/43

슬라이드 라이브러리 사용 후기

원래 의도는 직접 구현하려 했으나 코딩하다 보니 어려운 점 및 시간이 너무 소요 될 것 같아 1차 프로젝트는 일단 Slick 라이브러리를 사용하기로 했다

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" />

// react-slick 설치 및 css 설치
npm install react-slick --save
npm install slick-carousel --save

// 사용하려는 파일 안에 css import
import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";
사용법에는 이것을 import 하라고 하는데 나는 작성 안했는데 잘 돌아갔음

2. 본인이 사용하고 싶은 slide를 선택하여 속성에 맞게 사용

나는 Custom Paging, Responsive 두가지를 사용했다.

// 2가지 슬라이더 속성 정의
 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>