TIL- carousel feat.slick,

라이브러리를 사용한 프로젝트 시작..

어떻게 할 것인가 보다 무엇을 할 것인가를 생각하라!
는 아마도 라이브러리 덕이겠지

how to use

npm install react-slick --save

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";


export default function SimpleSlider() {
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
    </Slider>
  );
}

요렇게 demo버젼들이 많이 공식문서에 있다.
잘 살펴보고 원하는 것을 사용할 수 있다.

슬라이더를 만들 때 고려해야할 여러가지 옵션 (dots, arrow, button등) 내장되어 있고 setting으로 다룰 수 있어 편한다.

내가 한 건,
arrow위치, 모양 바꾸기
슬라이더 안에 슬라이더 넣기

const StyledSlider = styled(Slider)`
  position: relative;
  width: 100%;
  height: 400px;
  .slick-arrow {
  }

  .slick-prev {
    top: 85%;
    left: 80%;
    z-index: 1;
  }
  .slick-prev:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f053';
    font-weight: 900;
    font-size: x-large;
  }

  .slick-next:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f054';
    font-weight: 900;
    font-size: x-large;
  }

  .slick-next {
    top: 85%;
    right: 15%;
    z-index: 1;
  }
`;

class101의 배너

특이했는데, 배경슬라이더가 있고 앞에 다른 슬라이더(메인이라하겠음)가 움직이지만
배경과 메인슬라이더는 같이 동작한다.
배경슬라이더는 50%씩 영역을 차지하고 한쪽은 메인슬라이더 이미지와 동일한 이미지가 블러처리, 나머지 50%은 스트링이 들어가있었다.

const Sliders = () => {
  const [nav1, setNav1] = useState();
  const [nav2, setNav2] = useState();

  return (
    <SliderWrap>
      <StyledSlider asNavFor={nav2} ref={slider1 => setNav1(slider1)}>
        {MAIN_IMAGE_DATA.map(data => {
          return (
            <div className="SliderForm" key={data.id}>
              <SliderBackground color={data.bg}>
                <SliderImg src={data.img} alt="sskd" />
                <SliderString>
                  <p className="desc">{data.desc}</p>
                  <p className="subDesc">{data.subDesc}</p>
                </SliderString>
              </SliderBackground>
            </div>
          );
        })}
      </StyledSlider>

      <StyledSlider2
        asNavFor={nav1}
        ref={slider2 => setNav2(slider2)}
        slidesToShow={1}
        swipeToSlide={true}
        focusOnSelect={true}
        arrows={false}
        fade={true}
      >
        {MAIN_IMAGE_DATA.map(data => {
          return <SliderMainImg key={data.id} src={data.img} alt="dd" />;
        })}
      </StyledSlider2>
    </SliderWrap>
  );
};

유저커스터마이징

위치등의 커스터마이징은 개발자도구를 통해서 쉽게 할 수 있다.
개발자도구를 찍고 slick이 사용하고 있는 classname에 접근해서 커스터마이징해주면 된다.

나의 한 줄 후기
asnavfor가 공식문서에 친절히 나와있었지만, 적지 않은 시간을 소비하고 찾아버렸지 뭐람.. ㅎ

만들어 놓았던 슬라이더에 asnavfor를 사용했는데 메인 슬라이더 위치를 내맘대로 바꿀 수가 없었다.
스타일 컴포넌트가 익숙하지 않아 어디가 어떻게 되었는지도 모르겠고..

결국 그냥 다시 만들었는데 이런이런 바로 되어버렸다.
그냥 나의 div박스와 position개념이 부족했던걸로.. ㅜ