[React] Carousel (반응형 이미지 / 가로 스크롤) 사용법 (JS)

http://react-responsive-carousel.js.org/

http://react-responsive-carousel.js.org/

물론 직접 구현할 수도 있지만.. 잘 나와있는 라이브러리 쓰는 게 너무 편하다.

가로로 이미지 슉슉 넘기는 걸 캐로셀 (회전목마)라고 하더라.

 

내가 사용했던 라이브러리가 정말 간편하고 예쁘길래 사용 방법을 공유해보려고 합니당.

---

1. 설치하기

터미널창에 아래 커맨드를 입력해서 해당 라이브러리를 설치해줍니다.

npm install react-responsive-carousel --save

2. 코드 작성

필요한 것들을 import 해주고, return 안에 써있는 형식만 잘 갖춰서 써주면 된다. 

나 같은 경우는 react-start-app으로 만들어진 프로젝트 내에서 작업했기 때문에 return 안에 있는 형식만 참고해서 내 코드에 맞게 맞춰 넣었다. 

var React = require('react');
var ReactDOM = require('react-dom');
var Carousel = require('react-responsive-carousel').Carousel;

var DemoCarousel = React.createClass({
    render() {
        return (
            <Carousel>
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
                <div>
                    <img src="assets/4.jpeg" />
                    <p className="legend">Legend 4</p>
                </div>
                <div>
                    <img src="assets/5.jpeg" />
                    <p className="legend">Legend 5</p>
                </div>
                <div>
                    <img src="assets/6.jpeg" />
                    <p className="legend">Legend 6</p>
                </div>
            </Carousel>
        );
    }
});
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

 

3. CSS

는 알아서 취향껏 꾸미시면 됩니다. 끝!