基础demo：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css";
class DemoCarousel extends Component {
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>
</Carousel>
);
}
});
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
设置属性demo：
<ReactCarousel interval={5000} // 自动播放的间隔
autoPlay={true} // 自动播放
showArrows={true} //显示上一个和下一个箭头
showStatus={false} //显示当前项目的索引。即：（1/8）
showThumbs={false} //显示图像的缩略图
infiniteLoop={true} //无限循环滑动
emulateTouch={true} //允许鼠标模拟滑动
showIndicators={false}> //在底部显示小点，并带有用于更改项目的链接
<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>
</ReactCarousel>
