관리 메뉴

프론트엔드 정복하기

react-slick 라이브러리 본문

React/라이브러리

react-slick 라이브러리

GROWNFRESH 2020. 6. 25. 16:28

1. react-slick 설치

: npm install react-slick --save

 

2. 홈페이지에서 Example을 참고한다.

 

3. hooks 형 예시

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

function Visual() {

    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
        </Slider>
      </div>
    );
}

 

참고사이트

: react-slick 홈페이지

https://react-slick.neostack.com/docs/get-started/