React Carousel with text

Question

I am using https://www.npmjs.com/package/react-multi-carousel in one of my react project and I have implemented it and it works fine.

I am now in the need to implement the text (legend) over the carousel exactly like https://codesandbox.io/s/lp602ljjj7 which uses another package but I need that scenario and not that package because my need is different (Using nextjs so multi-carousel supports ssr and hence using it).

My only need is need to know how to implement the legend text over the carousel image using react-multi-carousel.

My code example: https://codesandbox.io/s/react-multi-carousel-playground-bt3v7

Answer 1

Change the structure of the return statement to the following structure.

Then you can store the value of the legend in the image array and pass the value to the p tag

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;