有人可以帮我创建这个轮播吗？

Question

我想使用react创建轮播。我不知道该怎么做。谁能帮我创建这个轮播？

我尝试了react-pure-carousel包，它看起来不像我想要的。它看起来就像一个普通的滑块。我不喜欢它，我想要一个像我的图片一样的轮播。

Answer 1

创建轮播组件：

为您的轮播创建一个新组件。您可以将其命名为 CircularCarousel.js

创建轮播数据：

const carouselItems = [
  {
    id: 1,
    imageSrc: 'image1.jpg',
    title: 'Item 1',
    description: 'Description for Item 1',
  },
  {
    id: 2,
    imageSrc: 'image2.jpg',
    title: 'Item 2',
    description: 'Description for Item 2',
  },
  // Add more items as needed
];

CircularCarousel.js

import React, { useState } from 'react';
import './CircularCarousel.css'; // Create this CSS file for styling

const CircularCarousel = ({ items }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const rotateCarousel = (step) => {
    const newIndex = (currentIndex + step + items.length) % items.length;
    setCurrentIndex(newIndex);
  };

  return (
    <div className="circular-carousel">
      {items.map((item, index) => (
        <div
          key={item.id}
          className={`carousel-item ${index === currentIndex ? 'active' : ''}`}
          style={{ transform: `rotate(${index * (360 / items.length)}deg)` }}
        >
          <img src={item.imageSrc} alt={item.title} />
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
      <button onClick={() => rotateCarousel(-1)}>Previous</button>
      <button onClick={() => rotateCarousel(1)}>Next</button>
    </div>
  );
};

export default CircularCarousel;

设计您的轮播：

创建一个 CSS 文件（例如 CircularCarousel.css），以根据您的设计要求设置轮播的样式。您需要调整 CSS 以实现您想要的圆形布局和外观。

在您的主应用程序文件（例如 App.js）中，导入并使用 CircularCarousel 组件：

import React from 'react';
import './App.css';
import CircularCarousel from './CircularCarousel';
import { carouselItems } from './carouselData';

function App() {
  return (
    <div className="App">
      <h1>Circular Carousel</h1>
      <CircularCarousel items={carouselItems} />
    </div>
  );
}

export default App;

设计应用程序

我希望这有效