Adding text or description to image component to pure-react-carousel - pure-react-carousel

Question

What is the appropriate way to add a description to each ? Currently I am adding a div under and I am unable to see the text.

Answer 1

Use Image component with tag prop and isBgImage set tot true.
<Slide index={i}>
<Image
tag='div'
isBgImage
src={someSrc}
>
<div className={descriptionClass}>Your description here</div>
</Image>
</Slide>

Answer 2

You can bypass the issue with a wrapper, without using isBgImage or children native props.
Create a wrapper component and use the prop children containing the text
Use the wrapper in the Slide component, pass the image's source as a prop
Add the children content
Use the position attritbute to style your children
It would look like this:
import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, Image } from 'pure-react-carousel';
const BackgroundImage = (props) => {
return (
<>
{props.children}
<Image src={props.img} />
</>
)
};
const childrenStyle = {
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)"
}; // to center the text for example
const Carousel = () => {
return(
<div className='home-banner'>
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={30}
totalSlides={4}
>
<Slider>
<Slide index={0}>
<BackgroundImage img={"your_image"} >
<div>Your children text</div>
</BackgroundImage>
</Slide>
// other slides here
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
</div>
)
};