How do I center the slides in pure react carousel

Question

Is there a property I can set in pure-react-carousel to make the slides appear "centered". I've tried to find an option for this and there is none.

Perhaps we can make a new prop like centered="true" to make this feature happen?

Answer 1

Centering a slide is just an illusion set up with CSS. There is no property for this in pure react carousel because it can be accomplished just with CSS.

You do this by adding left and right padding to the .carousel__slider class for horizontal sliders, or top and bottom padding for vertical carousels.

You can check out this working demo to see how it's done.

https://codesandbox.io/s/pure-react-carousel-center-the-slides-xxe6l