how to set the spacing between carousel elements?

[Jairwin-L]

@akiran @pratyushbh I have checked the documentation and demo, but there is no mention of how to set it up. It’s just that the official demo has spacing.

[Jairwin-L]

It seems like the only way to solve it, But I also hope that the official can also provide some solutions.

<Slider {...sliderSettings}>
  {[].map((item, index) => (
    <Fragment key={index}>
      <div
        style={{ marginRight: "10px" }}
      >
       11
      </div>
    </Fragment>
  ))}
</Slider>

[Enkratia]

Hello, @Jairwin-L

You can go to https://react-slick.neostack.com/docs/example/simple-slider -> click right mouse button on slider -> observe css code of page to understand. how css applied for this slider

Or simply do this:

  .slick-slider {
    margin-inline: -30px; //  space between slides * (-1)
  }

  .slick-slide {
    >div { // automatically generated 'div' by 'react-slick'
      margin-inline: 15px; //  space between slides / 2
    }
  }

Do you understand idea of this code?

[Jairwin-L]

Hello, @Jairwin-L

You can go to https://react-slick.neostack.com/docs/example/simple-slider -> click right mouse button on slider -> observe css code of page to understand. how css applied for this slider

Or simply do this:

  .slick-slider {
    margin-inline: -30px; //  space between slides * (-1)
  }

  .slick-slide {
    >div { // automatically generated 'div' by 'react-slick'
      margin-inline: 15px; //  space between slides / 2
    }
  }

Do you understand idea of this code?

okay, I probably understand