[TIL #49] React Slick carousel 사용하기

오늘 한 일

게임 추천 및 커뮤니티 사이트

• [슬라이드] Slick Carousel로 슬라이드 설정하기

학습 내용

React Slick은 캐러셀/슬라이더를 쉽게 만들 수 있는 라이브러리이다. React Slick은 React 애플리케이션에서 슬라이더 또는 캐러셀을 만드는 프로세스를 단순화하여 반응성이 뛰어나고 기능이 많아 슬라이드쇼 구성 요소를 쉽게 구현할 수 있도록 해준다.

Slick Carousel 사용하기

1. 설치

npm install react-slick slick-carousel
yarn add react-slick slick-carousel

2. Slider로 감싸주기

슬라이더에 들어갈 이미지들을 Slider로 감싸주고
슬라이더 효과에 대한 설정을 settings로 해줄 수 있다.
여기서 반응형에 대한 설정도 할 수 있어서 간편하다.

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

const YourCarouselComponent = () => {
  const settings = {
  // 슬라이더 설정
  };

  return (
    <Slider {...settings}>
      {/* 슬라이더에 들어갈 이미지 */}
    </Slider>
  );
};

export default YourCarouselComponent;

3. 자주 사용하는 settings

autoplay: true, // 자동 슬라이드
autoplaySpeed: 3000, // 자동 슬라이드 속도
dots: true, // 하단의 점 네비게이터
arrows: true, // 좌, 우 방향버튼
infinite: true, // 무한 슬라이드
speed: 500, // 전환 속도
slidesToShow: 3, // 한 번에 보여질 이미지 수
slidesToScroll: 1, // 슬라이드 시 한 번에 넘어갈 이미지 수
responsive: // 반응형 설정