反应旋转木马与文本

Question

我在我的一个 React 项目中使用 https://www.npmjs.com/package/react-multi-carousel，我已经实现了它并且工作正常。

我现在需要在转盘上实现文本（图例），就像 https://codesandbox.io/s/lp602ljjj7 使用另一个包一样，但我需要那个场景而不是那个包，因为我的需要不同（使用 nextjs 所以多轮播支持 ssr 并因此使用它）。

我只需要知道如何使用 react-multi-carousel 在轮播图片上实现图例文本。

我的代码示例：https://codesandbox.io/s/react-multi-carousel-playground-bt3v7

Answer 1

Live demo

您应该像下面这样更改数组结构。

const images = [
    {
        image: "https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
        text: "First image",
    }
];

然后在内部循环中添加文本并按照我们的方式设置样式！

const Simple = ({ deviceType }) => {
    return (
        <Carousel
            ssr
            partialVisbile
            deviceType={deviceType}
            itemClass="image-item"
            responsive={responsive}
        >
            {images.map(image => {
                return (
                    <div>
                        <img
                            draggable={false}
                            alt="text"
                            style={{ width: "100%", height: "100%" }}
                            src={image.image}
                        />
                        {/* Have to style so this should see over the image */}
                        <span>{image.text}</span>
                    </div>
                );
            })}
        </Carousel>
    );
};

Answer 2

将return语句的结构改为如下结构。

然后你可以将图例的值存储在图像数组中，并将该值传递给p标签

const Simple = ({ deviceType }) => {
  return (
    <Carousel
      ssr
      partialVisbile
      deviceType={deviceType}
      itemClass="image-item"
      responsive={responsive}
    >
      {images.slice(0, 5).map((image, index) => {
        return (
          <div key={index} style={{ position: "relative" }}>
            <img
              draggable={false}
              alt="text"
              style={{ width: "100%", height: "100%" }}
              src={image}
            />
            <p
              style={{
                position: "absolute",
                left: "50%",
                bottom: 0,
                color: "white",
                transform: " translateX(-50%)"
              }}
            >
              Legend:{index}.
            </p>
          </div>
        );
      })}
    </Carousel>
  );
};

export default Simple;

反应旋转木马与文本

React Carousel with text

javascript

carousel

reactjs

reactstrap

react-multi-carousel