[TIL] 20240612 - bookstore(9)

slick

---

🧊 Install

npm install react-slick --save
npm install slick-carousel --save
npm i --save-dev @types/react-slick

🧊 CSS 가져오기

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

🧊 USE

function MainReview({ reviews }: Props) {
  const sliderSettings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3,
    gap: 16
  }

  return (
    <MainReviewStyle>
      <Slider {...sliderSettings}>
        {reviews.map((review) => (
          <BookReviewItem key={review.id} review={review} />
        ))}
      </Slider>
    </MainReviewStyle>
  );
};

• dots : 슬라이드 위치를 이동하는 버튼

• infinite : 마지막 슬라이드에서 처음 슬라이드로 반복

• speed : 슬라이드가 넘어가는 속도

• slidesToShow : 한번에 보여지는 슬라이드 개수

• slidesToScroll : 한번에 넘어가는 슬라이드 개수