React中旋转木马中图像的平滑过渡

import React, { useState } from 'react';
import './Carousel.css';

const Carousel = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handlePrev = () => {
    setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1));
  };

  const handleNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));
  };

  const images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    // 更多图像...
  ];

  return (
    <div className="carousel">
      <button className="prev-button" onClick={handlePrev}>
        Prev
      </button>
      <div className="image-container">
        {images.map((image, index) => (
          <img
            key={index}
            src={image}
            alt={`Image ${index}`}
            className={`carousel-image ${index === currentIndex ? 'active' : ''}`}
          />
        ))}
      </div>
      <button className="next-button" onClick={handleNext}>
        Next
      </button>
    </div>
  );
};

export default Carousel;

.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container {
  display: flex;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.carousel-image.active {
  transform: rotateY(0deg);
}

.prev-button,
.next-button {
  /* 按钮样式 */
}