Styling children's width

[rimzzlabs]

<Slide
        autoplay={false}
        slidesToScroll={1}
        slidesToShow={slideToShow}
        cssClass='w-full h-[22.5rem]'
        canSwipe
      >
        {talents.map((people) => {
          return <HomeMatchPeopleItem key={people.id} {...people} />
        })}
      </Slide>

every mapped children will have it's parent and width (with style, not css class)

the first one on the screenshot have been deleted by me

how do I unset the width?

[prasad5795]

Hi @rizkimcitra ,

What you can do to unset this width is , write a css file and import it into your component, in that css file write the below code

.react-slideshow-wrapper > .images-wrap > div {
  width: unset !important;
}

But this wont solve your problem, I presume you want to customize the width of the slides and not depend on the container width, so to solve that write the following in your css

.react-slideshow-wrapper {
  width: 500px !important;
}

Hope this helps you

[rimzzlabs]

Hi @rizkimcitra ,

What you can do to unset this width is , write a css file and import it into your component, in that css file write the below code

.react-slideshow-wrapper > .images-wrap > div {
  width: unset !important;
}

But this wont solve your problem, I presume you want to customize the width of the slides and not depend on the container width, so to solve that write the following in your css

.react-slideshow-wrapper {
  width: 500px !important;
}

Hope this helps you

Thanks @prasad5795 , excellent solution, anw, I hope there are enhancement for next update about styling the children's width