React-responsive-carousel: How to remove black background and add text/button to each slide?

[thesecretlyawesome]

I want to add text and buttons into the slide instead of images. But the background remains black. How can I update the existing code to achieve my goal.

The existing code is at: https://codesandbox.io/s/k0vo7z1ypv

Any help is appreciated.
Thanks!

[dharnen]

Hello!

Fellow react-responsive-carousel user here. I might have a little insight on how to achieve what you're asking for. As far as adding text and buttons, you should be able to just place the html into each child component like you have shown for the text in your codesandbox (you might have to change the text color to something other than black to see it since the background is black). I've some minimal changes to your sandbox here to demonstrate: showing text and buttons. As far as changing the black background... the style of each <li> that is a slide has a background-color: #000 which is black. I'm not sure if this is the best route to take but if you go into the provided 'carousel.css', and 'carousel.min.css' files and search for '.carousel .slide' and append the background color it should be reflected once you compile. I realize this is changing the native code of the module but it works at a minimum. Hopefully this helps until @leandrowd responds.
=)

[EmmanuelSkapple]

Hi is very easy, only add in you css file where is the Carousel.

.carousel .slide{ background-color: none; }

and is all 😄

[patricksimonian]

I would suggest this issue is not closed as it'd be better to allow the component to by styled via something like emotion

[JoshuaMcEvoyPalo]

Hi is very easy, only add in you css file where is the Carousel.

.carousel .slide{ background-color: none; }

and is all 😄

For me it was actually background not background-color :)
.carousel .slide{ background: none; }

Hope that helps.

[dileshtanna]

Hi is very easy, only add in you css file where is the Carousel.

.carousel .slide{ background-color: none; }

and is all 😄

Just doing this would probably not work all the time.

Using the Carousel's parent class will help.
HTML:
<div className='carousel-container'> <Carousel /> </div>
CSS
.carousel-container .carousel .slide{ background-color: none; }

[wulinjie122]

I created a css file, like this:

.carousel .slide {
  background-color: none;
}

and imported in React component to cover Carousel's original css:

import "./index.css";

<Carousel >
...something you want show slide
</Carousel>

It works for me.