1import React, { Component } from 'react';
2import ReactDOM from 'react-dom';
3import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
4import { Carousel } from 'react-responsive-carousel';
5
6class DemoCarousel extends Component {
7 render() {
8 return (
9 <Carousel>
10 <div>
11 <img src="assets/1.jpeg" />
12 <p className="legend">Legend 1</p>
13 </div>
14 <div>
15 <img src="assets/2.jpeg" />
16 <p className="legend">Legend 2</p>
17 </div>
18 <div>
19 <img src="assets/3.jpeg" />
20 <p className="legend">Legend 3</p>
21 </div>
22 </Carousel>
23 );
24 }
25}
26
27ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
28
29// Don't forget to include the css in your page
30
31// Using webpack or parcel with a style loader
32// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
33
34// Using html tag:
35// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>