How do I add spacing to my slides with pure react carousel

Pure React Carousel components behave like a suite of HTML tags. A good analogy for the suite of Pure React Carousel components are the Table tags in HTML: table, thead, tbody, tr, th, tr, tfoot, colgroup, etc. The table tags are bare-bones, and only use default styles. You must apply css to them in order to customize your carousel.

Pure React Carousel is responsive by default. Meaning, it will stretch to the full width of its parent container unless the parent container uses CSS to restrict the width of Pure React Carousel.

The slides in Pure React Carousel have an intrinsic height by default. Meaning, just like an image tag, the height of each slide gets taller the wider each slide becomes. Just like the height of an image with no height attribute set gets taller the wider the image becomes in a browser.

The <Slide /> component has a child div with the class .carousel__inner-slide. To give your carousel the "illusion" of spacing between cells, create a css rule for .carousel__inner-slide in your project. That or pass the <Slide /> component a class name via the innerClassName prop.

Example:

.carousel__inner-slide {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  background-color: burlywood;
}

View a demo: https://codesandbox.io/s/withered-wood-4bx36?fontsize=14&hidenavigation=1&theme=dark

This worked for me:

.carousel__inner-slide {
  margin-right: 20px;
}