React-responsive-carousel: Black fill is visible during transition when using dynamicHeight and flexbox

[remjx]

In the transition from a wide image to the tall image, a black fill is visible.

https://codesandbox.io/s/j328w994l3

In lieu of a quick solution, as a workaround, is there a way to set this background fill color?

Thanks!

[leandrowd]

Hi @markjackson02, your example doesn't show the black fill. Have you tried using images instead of background?

[remjx]

@leandrowd sorry for the late response. Here is an updated sandbox: https://codesandbox.io/s/v85v7rpn05

The black fill is visible below the smaller image during the transition.

[blacksmoke26]

Any progress?

[ghost]

@blacksmoke26 @markjackson02
If I correctly understood.
You may just rewrite the style of background for this selector
.carousel .slide

This code is rewriting the fill color to yellow.
.carousel .slide{ background: yellow; }

[Aeonstrife]

@blacksmoke26 @markjackson02
If I correctly understood.
You may just rewrite the style of background for this selector
.carousel .slide

This code is rewriting the fill color to yellow.
.carousel .slide{ background: yellow; }

I changed.carousel .slide{ background: black; } to.carousel .slide{ background: yellow; }in carousel.min.css but I am still getting black bars

[ghost]

@Aeonstrife Try to open
https://codesandbox.io/s/v85v7rpn05
change code in overrides.css

[remjx]

I propose that we add background color as a prop unless there is a cleaner solution?

[talentlessguy]

I propose that we add background color as a prop unless there is a cleaner solution?

yes it would be nicer than overriding css classes

[Denny966]

Not sure why the default background color is black, imo, it shouldn't be set to anything

[remjx]

@Gu4etl's solution works. It looks like this https://github.com/leandrowd/react-responsive-carousel/blob/8593f0e2c7039fb502c25e80a0616dd8a532f9ec/src/components/_carousel.scss#L201 is where the black background is being set on .slide class

Does everyone agree it would make sense to add a prop for background color?

[pmourer]

making it undefined by default with an option to provide would be great

[snjay]

+1 it should be transparent by default with the ability to change it via a prop

[chasinhues]

Agreed, I think having a black background by default is unnecessarily opinionated.

+1 for slides having no background by default, and having the ability to modify the background of slides via a prop.

In case this helps anyone, the workaround I've opted for is using renderItem:

<Carousel
    renderItem={item => <div style={{ background: "white" }}>{item}</div>}
>

Alternatively, you could just override the background set on .carousel .slide.

[chasinhues]

@leandrowd thanks for building this package 😃 what are your thoughts on this issue and the solutions provided?

[Akbarshox]

HI. Please remove that black background color.

[phoenixbeats01]

Any progress? Why has this not been implemented.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[remjx]

bump

[Denny966]

Still an issue, should not be closed yet!