This is a simple responsive Carousel loading images from third-party sites and generating thumbnails automatically. We used React Responsive Carousel package which you need to first install and using Carousel component available in package we design our carousel.

React Responsive Carousel Example

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}>
				<img src=",q_65/c_fill,w_480,h_384/cities/jrfyzvgzvhs1iylduuhj.jpg" alt="Hong Kong" />
				<p className="legend">Hong Kong</p>
				<img src=",q_65/c_fill,w_480,h_384/cities/c1cklkyp6ms02tougufx.webp" alt="Singapore"/>
				<p className="legend"></p>
				<img src=",q_65/c_fill,w_480,h_384/cities/e8fnw35p6zgusq218foj.webp" alt="Japan"/>
				<p className="legend">Japan</p>
				<img src=",q_65/c_fill,w_480,h_384/cities/liw377az16sxmp9a6ylg.webp" alt="Las Vegas"/>
				<p className="legend">Las Vegas</p>

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.

Most Helpful This Week