Javascript 如何在react手势库中制作的幻灯片的幻灯片上添加按钮或文本

我用

反应手势库

和

反应手势应答器

制作了一个幻灯片。代码如下：

    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);

import React，{Component，useState}来自“React”；
从“react dom”导入react dom；
从“反应手势库”导入{Gallery，GalleryImage}；
常量图像=[
"https://images.unsplash.com/photo-1559666126-84f389727b9a?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1356&q=80“，
"https://images.unsplash.com/photo-1557389352-e721da78ad9f?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1050&q=80“，
"https://images.unsplash.com/photo-1553969420-fb915228af51?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1049&q=80“，
"https://images.unsplash.com/photo-1550596334-7bb40a71b6bc?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1050&q=80“，
"https://images.unsplash.com/photo-1550640964-4775934de4af?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1050&q=80“
];
函数App（）{
const[index，setIndex]=useState（0）；
React.useffect（（）=>{
常量间隔=设置间隔（（）=>{
if（index==images.length-1）{
setIndex（0）；
}否则{
setIndex（prevVal=>prevVal+1）；
}
}, 2500);
return（）=>clearInterval（interval）；
});
返回(
{
setIndex（i）；
}}
>
{images.map（img=>(
))}
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（

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


我是react的新手。你推荐其他库在react中制作幻灯片和图像库吗

任何人都可以吗？谢谢
如果您在幻灯片上遇到书写问题，那么您可以使用相同的方法。
在map函数中返回html内容

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

{images.map（image=>(
描述在这里
))}

如果希望描述显示在图像顶部，请使用带页边空白的
position:absolute

这是一个很好的描述，但所有图像的描述都是相同的。每个图像都有自己的描述。这只是一个示例，请将描述更改为您想要的。我不知道如何执行此操作。您能帮我为每个幻灯片添加单独的描述吗？谢谢