[react-slick] Carousel을 라이브러리로 쉽게 구현해보자!

 

 

1. 라이브러리 설치

npm install react-slick slick-carousel

 

 

2. Carousel 컴포넌트 생성 후 커스터마이징해서 사용하면 끗!

import React from 'react';
import Slider from 'react-slick';

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

const Carousel = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
  };

  return (
    <Slider {...settings}>
      <div>
        <img src="image1.jpg" alt="Image 1" />
      </div>
      <div>
        <img src="image2.jpg" alt="Image 2" />
      </div>
      <div>
        <img src="image3.jpg" alt="Image 3" />
      </div>
    </Slider>
  );
};

export default Carousel;

 

 

 

참고)

https://www.npmjs.com/package/react-slick

react-slick