Watcha Pedia Ep.4 (slider)

slider component

위와 같이 영화 리스트들이 있으며 이러한 슬라이더들을 보여주기 위해 react-slick을 설치한다.

npm i react-slick
npm i @types/react-slick -D

슬라이더들을 커스텀하기 위해 Setting을 따로 해준다.

const DEFAULT_SETTINGS: Settings = {
    dots: false, // 하단 indicator가 노출 되지 않는다 (몇번째 이미지를 보여주는지를 나타내는 indicator)
    arrows: true, // 좌우 이동 화살표 표시 여부
    infinite: false, // 마지막 슬라이더로 갔을 때, 다음 버튼을 누르면 처음으로 갈 것인지 여부
    speed: 500, // 넘어가는 속도
    slidesToShow: 5,
    slidesToScroll: 5,
    swipe: true,
    draggable: true,
    prevArrow: ( // 커스텀 화살표 버튼을 사용
        <ArrowButton>
            <MdArrowBackIos />
        </ArrowButton>
    ),
    nextArrow: (
        <ArrowButton>
            <MdArrowForwardIos />
        </ArrowButton>
    )
}

커스텀 화살표 버튼을 사용하기 위해 ArrowButton 컴포넌트를 생성해주고 'react-icons/md'에서 상황에 맞는 커스텀 화살표를 import 해왔다.
slick에 대한 다른 기능들을 위한 값들은 setting api에서 더 볼 수 있다.