时间戳

首页 > 解决方案 > 如何向幻灯片添加说明？

javascript - 如何向幻灯片添加说明？

问题描述

我正在开发 ReactJS 框架中的 Web 应用程序，并且我正在使用 react-slideshow-image 组件来制作简单的幻灯片。但是由于组件的工作方式，我只能渲染图像。我想为每张图片添加一个简短的描述并让它出现。有没有办法修改此代码以在图像下呈现描述？（我在考虑 useEffect 挂钩，但我不确定。）

const Slideshow = () => {
    return (

       <SlideContainer>
//styled component
           <Zoom scale={0.4}>
//Zoom component comes from react-slideshow-image
               {
                   slideshowImages.map((each, index) => <img key={index} style={{padding: "0", margin: "0", width: "20vw"}} src={each} />)
               }
           </Zoom>
       </SlideContainer>
    )
};

标签： javascriptreactjsweb

解决方案

这不是我想要的，但它为我指明了正确的方向。这是我的解决方案，灵感来自您的和官方 React 文档：

const slideshowImages = [
    {
        id: 1,
        image: "/imageUrl",
        desc: //description
    },
//as many elements as you want
]

const Slideshow = () => {
    //SlideContainer and DescriptionWrapper are styled components
    return (
       <SlideContainer>
           <Zoom {...zoomOutProperties}>
               {
                   slideshowImages.map(
                       (slide) =>
                           <div key={slide.id}>
                               <img style={{padding: "0", margin: "0", width: "20vw"}} src={slide.image} />
                               <DescriptionWrapper>{slide.desc}</DescriptionWrapper>
                           </div>

                       )
               }
           </Zoom>
       </SlideContainer>
    )
};

export default Slideshow;

非常感谢，我不会想到这样的事情。

推荐阅读