javascript - 如何在 react 手势画廊制作的幻灯片的幻灯片上添加按钮或文本

Question

我使用react-gesture-gallery和react-gesture-responder制作了幻灯片。代码在这里:

    import React, { Component, useState } from "react";
    import ReactDOM from "react-dom";
    import { Gallery, GalleryImage } from "react-gesture-gallery";

    const images = [
      "https://images.unsplash.com/photo-1559666126-84f389727b9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1356&q=80",
      "https://images.unsplash.com/photo-1557389352-e721da78ad9f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
      "https://images.unsplash.com/photo-1553969420-fb915228af51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80",
      "https://images.unsplash.com/photo-1550596334-7bb40a71b6bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
      "https://images.unsplash.com/photo-1550640964-4775934de4af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
    ];

    function App() {
      const [index, setIndex] = useState(0);

      React.useEffect(() => {
        const interval = setInterval(() => {
          if (index == images.length - 1) {
            setIndex(0);
          } else {
            setIndex(prevVal => prevVal + 1);
          }
        }, 2500);

        return () => clearInterval(interval);
      });

      return (
        <Gallery
          style={{
            height: "100vh",
            width: "100vw",
            backgroundColor: "#0a0a0a"
          }}
          index={index}
          onRequestChange={i => {
            setIndex(i);
          }}
        >
          {images.map(img => (
            <GalleryImage src={img} objectFit={"contain"} />
          ))}
        </Gallery>
      );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

代码可用 here 。

我想在每张幻灯片中添加一些 html。例如，有关该幻灯片和按钮的简短说明。

我是 react 新手。您是否推荐其他库来在 React 中制作幻灯片和图片库？

请问有人吗？谢谢

Answer 1

返回 map 函数内的html内容。

{images.map(image => (
  <div>
    <GalleryImage objectFit="contain" key={image} src={image} />
    <h1 className="description">Description here</h1>
  </div>
))}

如果您希望描述出现在图像顶部，请使用带有边距顶部的position:absolute。

DEMO