How add spaces between Slick carousel item

Question

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.

As explained in image. i want space from right of first item to left of right image, not on starting and ending points — Sopo, Jun 23 '15 at 09:41
Did you get the solution to this later? I am also facing same issue. — aslamdoctor, Jul 12 '15 at 12:59

score 121 · Answer 1 · edited May 25 '16 at 11:46

121

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

edited May 25 '16 at 11:46

Mehdi Dehghani

8,186
5
49
53

answered Jul 26 '15 at 10:23

Dishan TD

7,118
7
21
37

1

This solution is great and will work. (btw this solution is mentioned in plugin's github profile too, refer to https://github.com/kenwheeler/slick/issues/582) – Mehdi Dehghani May 25 '16 at 10:34
2

I needed to place a `overflow: hidden` on the container of the slider to prevent an overflow because of the margin. – Patrizio Bekerle May 28 '18 at 08:48

score 15 · Answer 2 · answered Aug 03 '18 at 08:04

15

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

answered Aug 03 '18 at 08:04

Sushil Thapa

318
2
12

2

It works but slides are visible outside of the slider during the animation. – Sébastien Gicquel Jun 19 '19 at 15:43

score 11 · Answer 3 · answered Dec 12 '16 at 18:05

11

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

answered Dec 12 '16 at 18:05

Pablo S G Pacheco

2,170
23
23

I needed to place a `overflow: hidden` on the container of the slider to prevent an overflow because of the margin. – Patrizio Bekerle May 28 '18 at 08:49

score 11 · Answer 4 · edited Dec 17 '19 at 18:06

11

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.

edited Dec 17 '19 at 18:06

mbacklas

27
4

answered Mar 07 '18 at 13:13

Orlandster

3,837
2
22
42

Can you confirm from which version onwards this is the case? – Rick Davies Nov 08 '18 at 22:35
4

It works but it also add 20px margin on right and left of slider and that is not really nice. – Sébastien Gicquel Jun 19 '19 at 15:35

score 4 · Answer 5 · answered Jun 05 '19 at 08:11

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.

score 3 · Answer 6 · answered Apr 09 '18 at 03:54

3

Just fix css:

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

answered Apr 09 '18 at 03:54

Anh Hoai Vui Le

31
1

Sopo · Accepted Answer · 2015-07-13T12:55:19.113

2

Yup, I have found the solution for dis issue.

Create one slider box with extra width from both side( Which we can use to add item space from both sides ).
Create Inner Item Content with proper width & margin from both sides( This should be your actual wrapper size )
Done

edited Jul 13 '15 at 12:55

answered Jul 13 '15 at 12:35

Sopo

1,146
2
10
26

score 1 · Answer 8 · answered Jun 23 '15 at 10:14

1

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

answered Jun 23 '15 at 10:14

stanze

2,326
8
13

i have check both of your fiddles, when i am changing to next item it is showing space for first & second . Actually i am trying to remove that space(margin space) on viewable area and use full width of viewable part to single item – Sopo Jun 23 '15 at 11:52
1

This is the correct answer. Adaptive width and height helped fix my problem. – Danny Dec 18 '15 at 03:07

score 1 · Answer 9 · edited Jan 13 '17 at 08:03

1

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

edited Jan 13 '17 at 08:03

M. Wiśnicki

5,749
3
20
27

answered Jan 13 '17 at 07:15

MJ Mikz

25
1

score 1 · Answer 10 · answered Oct 23 '20 at 10:47

1

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

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

answered Oct 23 '20 at 10:47

Chhun Socheat

22
1
3

score 0 · Answer 11 · answered Jun 23 '15 at 09:51

0

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!!!

answered Jun 23 '15 at 09:51

Manish Kumar

793
11
22

1

i have already tried that but it will affect the next items on scroll – Sopo Jun 23 '15 at 09:56
This will not work if you have set 'inifite' option to true – Karl Taylor Mar 21 '18 at 10:45

score 0 · Answer 12 · answered Jun 23 '15 at 21:31

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.

score 0 · Answer 13 · answered Sep 14 '15 at 22:08

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

How add spaces between Slick carousel item

13 Answers13

Linked