React Carousel With Text

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 (l

Solution 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

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

exportdefaultSimple;

Solution 2:

Live demo

You should change array structure like below.

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",
    }
];

Then inside loop just add text and style it our way!

constSimple = ({ deviceType }) => {
    return (
        <CarouselssrpartialVisbiledeviceType={deviceType}itemClass="image-item"responsive={responsive}
        >
            {images.map(image => {
                return (
                    <div><imgdraggable={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>
    );
};