如何使用react创建自动幻灯片

npx create-react-app slideshow
cd slideshow

npm install react react-dom react-scripts
npm install react-transition-group
npm install react-responsive-carousel

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

const Slideshow = () => {
  return (
    <Carousel autoPlay={true} infiniteLoop={true} showThumbs={false}>
      <div>
        <img src="image1.jpg" alt="Slide 1" />
        <p className="legend">Slide 1</p>
      </div>
      <div>
        <img src="image2.jpg" alt="Slide 2" />
        <p className="legend">Slide 2</p>
      </div>
      <div>
        <img src="image3.jpg" alt="Slide 3" />
        <p className="legend">Slide 3</p>
      </div>
    </Carousel>
  );
};

export default Slideshow;

import React from 'react';
import Slideshow from './Slideshow';

const App = () => {
  return (
    <div className="App">
      <h1>自动幻灯片</h1>
      <Slideshow />
    </div>
  );
};

export default App;

npm start