[TIL] React Slick - Carousel(캐러셀)

React Slick

React에서 사용할 수 있는 반응형 이미지 슬라이더 라이브러리이다. Slick Carousel은 사용자 친화적인 터치 슬라이더와 함께 다양한 슬라이드 효과와 구성 옵션을 제공해준다. 주로 Next.js와 같은 React 기반의 프로젝트에서 사용되며, 간편하게 커스터마이징할 수 있어 많은 개발자에게 선호되는 라이브러리 중 하나이다.

설치

npm install react-slick --save
yarn add react-slick

// Css파일 가져오기
npm install slick-carousel --save
yarn add -D slick-carousel

import

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

React Slick의 핵심 기능

• 반응형 디자인: React Slick은 다양한 장치 및 화면 크기에 자동으로 적응하여 반응형 디자인을 제공합니다.

• 다양한 슬라이드 효과: Slick Carousel은 여러 가지 슬라이드 전환 효과를 제공합니다. 사용자 정의 가능한 슬라이드 효과를 사용하여 웹 페이지나 어플리케이션에 동적이고 멋진 내비게이션을 추가할 수 있습니다.

• 사용자 정의 가능한 화살표 및 도트 네비게이션: 화살표 및 도트를 통해 슬라이드를 제어하는 네비게이션을 커스터마이징할 수 있습니다. React Slick에서는 nextArrow 및 prevArrow 속성을 사용하여 사용자 정의 네비게이션 컴포넌트를 지정할 수 있습니다.

• 무한 루프 및 자동 재생: 슬라이드가 무한으로 반복되도록 설정하거나, 자동으로 슬라이드를 전환할 수 있도록 설정할 수 있습니다.

• 터치 이벤트 지원: 모바일 기기 및 터치 기반 디바이스에서도 원활하게 작동하며 터치 제스처를 지원합니다.

Customs Slides

🔖React-Slick 공식문서

export default function Carousel ({ photo }: Props) {
  const settings = {
    dots: true,
    infinite: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    nextArrow: <CommuNextArrow />,
    prevArrow: <CommuPrevArrow />,
  };

  return (
    <Slider {...settings}>
    </Slider>
  );
}

Arrow 커스텀(스타일링)

SampleNextArrow.tsx

type Props = {
  className?: any;
  style?: any;
  onClick?: React.MouseEventHandler<HTMLDivElement>;
};

export default function SampleNextArrow({ className, style, onClick }: Props) {
  return (
    <div
      className={className}
      style={{ ...style, display: 'block', background: 'red' }}
      onClick={onClick}
    />
  );
}

스타일링을 할 수 있는 만큼, 이미지로 교체할 수도 있지만 주의하실 점은 기존의 arrow도 영역은 남아있기 때문에, 클래스로 접근하여 보이지 않게 감춰줘야 한다.