Adding text or description to image component to 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

You can bypass the issue with a wrapper, without using isBgImage or children native props.

1. Create a wrapper component and use the prop children containing the text
2. Use the wrapper in the Slide component, pass the image's source as a prop
3. Add the children content
4. 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>
  )
};

Answer 2

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>