React-slick: how can i set slide item margin ?

[V-Tom]

I saw the code write this in mixins.helpers.initialize and line 30
var slideWidth = trackWidth / props.slidesToShow;

But i want add margin or padding on slidesItem rather than each mixed together
like this:
var slideWidth = (trackWidth+padding*2) / props.slidesToShow;

I saw the examples,every slides item not mixed together.

and however i can use css like padding:0 10px; to resolve it

Is there any options to set it?

[akiran]

Using css is the best way to control margin/padding on slides

[mcmillhj-wta]

@V-Tom Did you ever happen to find a good solution to this? Like @akiran says you can set margin or padding on the slides, but the next slide and previous slide button don't respect that and end up not left-aligning the slides with the start of the carousel.

[silicakes]

My workaround around this issue was to wrap my slides with an additional <div/> which has a padding-right set for the amount of desired margin:

Relevant configuration

{      
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  centerPadding: 30
}

JSX

<div className="item">
  <SlideElement>...</SlideElement>
</div>

CSS

.item {
  padding-right: 10px;
}

[mcmillhj-wta]

A solution that worked well for our team was to add a thick border to each item that is the same color as the background. This way the padding doesn't affect the carousel in any way.

[azjgard]

@mcmillhj-wta That worked really well for me as well, in combination with setting the box-sizing property to "border-box".

[lamari]

What did work for me, is this:
I wrapped my item with a container that have height bigger than the item itself, and then I deleted the margin from my item ;)

[srikanthbandaru]

I fixed it using

.slick-slide {
  padding: 0 15px;
}

.slick-list {
  margin: 0 2em;
}

[tylik1]

I ended up adding margin to the element inside ..slick-slide and then add negative margin on .slick-list

e.g.

.slick-slide img {margin-left:10px;}
.slick-list {margin-left:-10px;}

[ZeroCool-85]

You dont need to set margins just set:

 .slick-slide {
         padding: 0 8px;
         box-sizing: border-box;
  }

padding-left/right depends on your centerPadding.

[nhd2106]

I fixed it using

.slick-slide {
  padding: 0 15px;
}

.slick-list {
  margin: 0 2em;
}

many thanks, it worked in my case!