0

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.

Ross
  • 7

2 Answers2

0

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>
DanDance
  • 147
  • 8
  • This did work, but not in my case. I have a mask over my images to make them a circle. The mask also affects the description and it becomes invisible. Any tips on how to deal with that? – Ross Jan 12 '21 at 15:34
0

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>
  )
};
D_M_M
  • 1