How add spaces between Slick carousel item

I want to add space between two slick carousel items, but not want the space with padding, because it's reducing my element size(and I don't want that).

enter image description here

    $('.single-item').slick({
        initialSlide: 3,
        infinite: false
    });

.slick-slider {
    margin:0 -15px;
}
.slick-slide {
    padding:10px;
    background-color:red;
    text-align:center;
    margin-right:15px;
    margin-left:15px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-12" style="background-color:gray;">
            <div class="slider single-item" style="background:yellow">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </div>
</div>

Somehow I am getting space from both side, I am trying to remove that.

Solution 1:

  /* 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)

Solution 2:

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;}

Solution 3:

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.

Solution 4:

@Dishan TD's answer works nice, but I'm getting better results using only margin-left.

And to make this clearer to everyone else, you have to pay attention to the both opposite numbers: 27 and -27

  /* the slides */
  .slick-slide {
    margin-left:27px;
  }

  /* the parent */
  .slick-list {
    margin-left:-27px;
  }

Solution 5:

An improvement based on the post by Dishan TD (which removes the vertical margin as well):

  .slick-slide{
    margin-left:  15px;
    margin-right:  15px;
  }

  .slick-list {
    margin-left: -15px;
    margin-right: -15px;
    pointer-events: none;
  }

Note: the pointer-events was necessary in my case, to be able to click on the left arrow.