React-显示图像幻灯片

import React, { useState } from 'react';

const ImageSlider = ({ images }) => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const nextImage = () => {
    setCurrentImageIndex((currentImageIndex + 1) % images.length);
  };

  const previousImage = () => {
    setCurrentImageIndex((currentImageIndex - 1 + images.length) % images.length);
  };

  return (
    <div>
      <button onClick={previousImage}>Previous</button>
      <img src={images[currentImageIndex]} alt="Slideshow" />
      <button onClick={nextImage}>Next</button>
    </div>
  );
};

export default ImageSlider;

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

const App = () => {
  const images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    // 添加更多图片
  ];

  return (
    <div>
      <h1>Image Slideshow</h1>
      <ImageSlider images={images} />
    </div>
  );
};

export default App;