[jquery] 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).

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

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

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

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

Add

centerPadding: '0'

Slider settings will look like:

$('.phase-slider-one').slick({
     centerMode: true,
     centerPadding: '0',
     responsive: [{breakpoint: 1024,},{breakpoint: 600,},{breakpoint: 480,}]
});

Thank you

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.

simply add padding on to the slick-side class will do

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

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

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

If you want a bigger space between the slides + not to decrease the slide's width, it means you'll have to show less slides. In such case just add a setting to show less slides

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

Another option is to define a slide's width by css without setting to amount of slides to show.

Just fix css:

/* the slides */
.slick-slider {
    overflow: hidden;
}
/* the parent */
.slick-list {
    margin: 0 -9px;
}
/* item */  
.item{
    padding: 0 9px;
}

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.

Try to use pseudo classes like :first-child & :last-child to remove extra padding from first & last child.

Inspect the generated code of slick slider & try to remove padding on that.

Hope, it'll help!!!

With the help of pseudo classes removed margins from first and last child, and used adaptive height true in the script. Try this fiddle

One more Demo

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

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

For example: Add this data-attr to your primary slick div: data-space="7"

                    $('[data-space]').each(function () {
                        var $this = $(this),
                            $space = $this.attr('data-space');

                        $('.slick-slide').css({
                            marginLeft: $space + 'px',
                            marginRight: $space + 'px'
                        });

                        $('.slick-list').css({
                            marginLeft: -$space + 'px',
                            marginRight: -$space/2 + 'px'
                        })
                    });