Carousel

To create the example project for this example, open command prompt, navigate to a convenient location, and run the command as shown below :

create-react-app example2

Now navigate to the project folder and add the React Responsive Carousel package to the project as shown below :

cd example2

npm i react-responsive-carousel

Now just replace the placeholder content of App.js with given below content :

import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css";

let styles = {
    margin: 'auto',
    width: '500px'
  };
  
function App() {
  return (
	<div style={styles}>
		<Carousel>
			<div>
				<img src="https://res.klook.com/image/upload/fl_lossy.progressive,q_65/c_fill,w_480,h_384/cities/jrfyzvgzvhs1iylduuhj.jpg" alt="Hong Kong" />
				<p className="legend">Hong Kong</p>
			</div>
			<div>
				<img src="https://res.klook.com/image/upload/fl_lossy.progressive,q_65/c_fill,w_480,h_384/cities/c1cklkyp6ms02tougufx.webp" alt="Singapore"/>
				<p className="legend"></p>
			</div>
			<div>
				<img src="https://res.klook.com/image/upload/fl_lossy.progressive,q_65/c_fill,w_480,h_384/cities/e8fnw35p6zgusq218foj.webp" alt="Japan"/>
				<p className="legend">Japan</p>
			</div>
			<div>
				<img src="https://res.klook.com/image/upload/fl_lossy.progressive,q_65/c_fill,w_480,h_384/cities/liw377az16sxmp9a6ylg.webp" alt="Las Vegas"/>
				<p className="legend">Las Vegas</p>
			</div>
		</Carousel>
	</div>
  );
}

export default App;

In the second line import example, we are doing the same as line one, but here we are referencing a package name. This is the common pattern in React for referencing a specific component from package. In the third line import example, we see that we importing a CSS file.

In this < Carousel >...< Carousel / > component above, we can see that we are pulling images. We also see the use of HTML elements in our React code. This is possible thanks to a library called JSX, which lets us write HTML markup directly in our JavaScript.