[Frontend] 사진 자동 회전 (carousel)

seonja kim·2020년 5월 7일
0

react-slick

install

npm install react-slick --save <-클릭하면 링크 연결

CSS / font

npm install slick-carousel

//import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

사용할 react Component 파일에
import Slider from "react-slick";

사용법

class 형식으로 사용한다고 가정할 경우

render()와 return() 사이에 setting을 해야 함

var settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };

이렇게 필요한 부분에 따라 셋팅을 끝 낸 후, 화면에 보여주고 싶은 부분을 return()한다

return (
	<Slider {...settings}>
    <div><div/>
    </Slider>
);
profile
Adventurer

0개의 댓글