[React] 리액트 slide 적용하기 / react-slide / Carousel 만들기

리액트 슬라이드 라이브러리에 여러 가지가 있는데

제일 간단하고 쓰기 편하다는 react-sldie를 사용해 봤습니다.

 

⭐️ 라이브러리 설치

npm install react-slick --save
npm install slick-carousel --save

npm을 이용해 라이브러리를 설치해 줍니다.

해당 라이브러리가 잘 설치되었다면 package.json 에 

이렇게 들어가있습니다.

 

⭐️ 사용법

slide를 import 해줍니다.

import React from "react";
import Slider from "react-slick"; // slide import

const MainSlider = () => {
    const settings = {
        dots: true,
        Infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };

    return (
        <div>
            <Header/>
            <Slider { ...settings }>
                <div>
                    <h3>1</h3>
                </div>
                <div>
                    <h3>2</h3>
                </div>
                <div>
                    <h3>3</h3>
                </div>  
            </Slider>
        </div>
        
    );
}

export default MainSlider

 

const settings을 이용해 slide 옵션을 설정할 수 있습니다.