pure-react-carousel: all slides visible

Question

Summary I am trying to render some slides and the container the slides exist in does not hide the non-active slides. The result is you can see all slides when only one should be visible. Additionally, The slides render outside of the container.

Attempts I'd rather not make my own slide component and try to get it to work since that's the point of using this library. I've tried changing different css styles to see if it works, tried changing some of the content, nothing has fixed it yet.

Notes When I put the component into storybook, the issue goes away. I'm not sure what the difference is, I pass the same props to both.

Answer 1

I found a solution. I changed the file to a scss file in node_modules, created an scss file in the same folder as my component, and imported the node_modules scss file into the new scss file.

Answer 2

The problem is related to react-carousel.es.css. It's either not imported or not applied for some reason. I had the same issue when forgot to import it