如何在一张幻灯片中生成像旋转木马这样的动态网格，用多个项目对js做出反应？

Question

​

​

我希望创建一个像这样的旋转木马，它的图像是从一个API中提取出来的，在React中。我在网上寻找一个现成的旋转木马，但找不到。我希望能够显示获取的图像URL在这些部分，然后自动创建一个新的旋转木马幻灯片，如果我有超过5张图片。我是新来的，所以请帮我解决这个问题。我现在有一个普通的旋转木马

`

<Carousel className="gh78">
                    {trending.map((item, index) => (
                          <Carousel.Item key={index}>
                            <div className="LiveStats46">
                              <div className="Live24">
                                <samp className="blink"></samp>
                                {item.video_type}
                              </div>
                              <div className="Views24">
                                <span className="fas fa-user"></span>
                                {item.watching_count}
                              </div>
                            </div>
                            <Link href={"/live-streaming/" + item.streamkey}>
                              <a>
                                <div className="trenvid23">
                                  {item.video_image ? (
                                    <img
                                      src={item.video_image}
                                      alt="terndingimage"
                                    ></img>
                                  ) : (
                                    <img
                                      src="https://d25u15mvjkult8.cloudfront.net/Website/Assets/Images/gameseedefault.png"
                                      alt="trending"
                                    ></img>
                                  )}
                                </div>
                              </a>
                            </Link>
                          </Carousel.Item>
                        ))}
                  </Carousel>`

​

​

这就是我现在的样子

Answer 1

您可以根据块大小(这里是5，因为每张幻灯片需要多少图像)和旋转木马的索引(我们使用哪一张幻灯片)来slice()您收到的数据：

  const [allImages, setAllImages] = useState([]);
  const [imagesToDisplay, setImagesToDisplay] = useState([]);
  const [index, setIndex] = useState(1);
  const chunkSize = 5;

  // Retrieve data
  useEffect(() => {
    setAllImages([
      { name: "Image 1",  link: "/image1" },
      { name: "Image 2",  link: "/image2" },
      { name: "Image 3",  link: "/image3" },
      { name: "Image 4",  link: "/image4" },
      { name: "Image 5",  link: "/image5" },
      { name: "Image 6",  link: "/image6" },
      { name: "Image 7",  link: "/image7" },
      { name: "Image 8",  link: "/image8" },
      { name: "Image 9",  link: "/image9" },
      { name: "Image 10", link: "/image10" },
      { name: "Image 11", link: "/image11" }
    ]);
  }, []);

  // Slice the data
  useEffect(() => {
    setImagesToDisplay(
      allImages.slice(
        chunkSize * index - chunkSize,
        chunkSize * index
      )
    );
  }, [allImages, index]);

  // Go previous index
  const handleSubstractIndex = () => {
    setIndex((prevIndex) => prevIndex - 1);
  };
  // Go next index
  const handleAddIndex = () => {
    setIndex((prevIndex) => prevIndex + 1);
  };

  return (
    <>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 3fr 1fr",
          gridTemplateRows: "2fr 1fr"
        }}
      >
        {imagesToDisplay.map((image) => (
          <div
            className="carousel"
            key={image.link}
            style={{ border: "1px solid orange" }}
          >
            {image.name}
          </div>
        ))}
      </div>
      <button onClick={() => handleSubstractIndex()}>previous</button>
      <button onClick={() => handleAddIndex()}>next</button>
    </>
  );

​

​

然后，我将使用Framer，React或任何您使用的支持卸载动画的动画库来动画旋转木马。

当然，现在还有其他方法来实现这一点，这正是我个人的做法，因为它很适合我的项目。

您也可以添加更多的逻辑，以重置旋转木马，同时到达终点。