How add spaces between Slick carousel item
/* the slides */
.slick-slide {
margin: 0 27px;
}
/* the parent */
.slick-list {
margin: 0 -27px;
}
This problem reported as issue (#582) on plugin's github, btw this solution mentioned there too, (https://github.com/kenwheeler/slick/issues/582)
Since the latest versions you can simply add a margin
to your slides:
.slick-slide {
margin: 0 20px;
}
There's no need for any kind of negative margins, since slick's calculation is based on the elements outerHeight
.
The slick-slide has inner wrapping div which you can use to create spacing between slides without breaking the design:
.slick-list {margin: 0 -5px;}
.slick-slide>div {padding: 0 5px;}