두 번째로 알아보는 react-slick!! 처음에 프로젝트를 할 때 이 Carousel을 직접 구현을 할지.. 라이브러리를 사용해서 만들지 고민이 많았지만.. 라이브러리를 이용해 구현을 했습니다!
그러면 Carousel이 무엇인지 부터 알아보겠습니다..!!

Carousel🎠

우리나라에서는 슬라이드라고 더 많이 불리는 기능이지만..! 정확한 명칭은 Carousel(회전목마)이고 회전목마처럼 돌아간다고 해서 Carousel sliders라고 불립니다!

사용법

$ npm install react-slick --save

사용한 코드 👨🏻‍💻

import React from "react";
import styled from "styled-components";
import MovieCard from "./MovieCard";
import Slider from "react-slick";

const Carousel = ({ movies }) => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 5,
    slidesToScroll: 5,
    appendDots: (dots) => (
      <div
        style={{
          width: "100%",
          position: "absolute",
          bottom: "24px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <ul> {dots} </ul>
      </div>
    ),
    dotsClass: "dots_custom",
    responsive: [
      {
        breakpoint: 1400,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4,
        },
      },
      {
        breakpoint: 1300,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
        },
      },
      {
        breakpoint: 960,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 2,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };
  return (
    <Container>
      <StyledSlider {...settings}>
        {movies.results &&
          movies.results.map((movie) => (
            <MovieCard key={movie.id} movie={movie} />
          ))}
      </StyledSlider>
    </Container>
  );
};

export default Carousel;

// styled
...

커스터마이징 ⚙

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 5,
    slidesToScroll: 5,
    appendDots: (dots) => (
      <div>
        <ul> {dots} </ul>
      </div>
    ),
    dotsClass: "dots_custom",
    responsive: [
      {
        breakpoint: 1400,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4,
        },
      },
      ...
   	]
  };

• dots

  carousel 밑에 지정 콘텐츠로 바로 이동할 수 있는 버튼을 뜻하고
  flase 할시 사라집니다.

• infinite

  콘텐츠 끝까지 갔을 때 다음 콘텐츠를 처음 콘텐츠로 가져와 반복

• speed

  컨텐츠를 넘길때의 속도. 500ms

• slidesToShow

  한 화면에 보여줄 컨텐츠 개수

• slidesToScroll

  한 번에 넘길 컨텐츠 수

• responsive

  반응형 웹 페이지를 만들 때 사용

• breakpoint

  width 크기

참고 사이트

react-slick에 들어가면 더 많은 예제가 준비되어있다!