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.

Did you get the solution to this later? I am also facing same issue. — aslamdoctor, Jul 12 '15 at 12:59

score 169 · Answer 1 · edited Jan 27 '22 at 01:38

169

  /* 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 Jan 27 '22 at 01:38

Roman Snitko

3,655
24
29

answered Jul 26 '15 at 10:23

Dishan TD

8,528
7
26
41

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
5

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 28 · Answer 2 · answered Aug 03 '18 at 08:04

28

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

564
7
17

2

It works but slides are visible outside of the slider during the animation. – Sébastien Gicquel Jun 19 '19 at 15:43
Added your suggestion using React Slick and Styled Components and it worked. – cassmtnr Jan 04 '22 at 15:00

score 16 · Answer 3 · edited Dec 17 '19 at 18:06

16

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

4,706
2
30
45

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

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 13 · Answer 4 · answered Dec 12 '16 at 18:05

13

@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,550
28
28

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 9 · 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.

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

7

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,577
3
16
28

score 4 · Answer 7 · answered Apr 09 '18 at 03:54

4

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

41
1

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

4

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

72
1
6

score 2 · Answer 9 · answered Jun 23 '15 at 10:14

2

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,456
10
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 2 · Answer 10 · answered Dec 23 '22 at 23:12

2

Nowadays, the gap property for flexbox has pretty decent support: https://caniuse.com/flexbox-gap

So you can use this:

.slick-track {
    display: flex;
    gap: 1rem;
}

It'll add space only between elements.

answered Dec 23 '22 at 23:12

Bruno Ribeiro

646
6
13

score 1 · Answer 11 · 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'
                        })
                    });

This is the perfect solution for changing the space dynamically. I have tested it. — M.S Shohan, Sep 30 '21 at 06:21

score 1 · Answer 12 · 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

6,094
3
23
28

answered Jan 13 '17 at 07:15

M Jos

71
2

score 0 · Answer 13 · 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

1,131
15
28

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 14 · 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 15 · answered Jul 08 '21 at 10:04

0

This approach works with the latest version of react-slick:

  .slick-list {
    margin: 0 -7px !important;
  }
  
  .slick-slide > div {
    padding: 0 7px !important;
  }

answered Jul 08 '21 at 10:04

Pilot Tt

23
3

Hoang Long · Answer 16 · 2022-09-15T12:23:49.290

0

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

edited Sep 15 '22 at 12:23

answered Feb 27 '22 at 18:58

Hoang Long

446
4
5

1

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Feb 27 '22 at 19:44

score 0 · Answer 17 · answered Apr 12 '22 at 11:09

screen screen
data-sm, data-md, data-lg, data-xl, data-xxl and for default screen size data-default

To space between items use space=10, Here 10 is size in "em"

eg: I have setting space from small to medium screen 2, and from large to extra large screen I am setting space 5 data-default="[space=2]" data-xl="[space=5]"

Note: data-default="[space=1]" these attribute should be set in "your-slick-slider-class" only

Javascript code

function slickSpacing(space, self){
    self.find('.slick-slide').css({
        marginLeft: space + 'em',
        marginRight: space + 'em'
    });
    self.find('.slick-list').css({
        marginLeft: -space + 'em',
        marginRight: -space/2 + 'em'
    });
}
function slickSlider(){
    $('.slick-slider').each(function () {
        var self = $(this);
        // var screenSize = String(self.attr('data-md')).match(/screen=([0-9]+)/);
        var spaceDefaultSize = String(self.attr('data-default')).match(/space=([0-9]+)/);
        var spaceSmSize = String(self.attr('data-sm')).match(/space=([0-9]+)/);
        var spaceMdSize = String(self.attr('data-md')).match(/space=([0-9]+)/);
        var spaceLgSize = String(self.attr('data-lg')).match(/space=([0-9]+)/);
        var spaceXlSize = String(self.attr('data-xl')).match(/space=([0-9]+)/);
        var spaceXxlSize = String(self.attr('data-xxl')).match(/space=([0-9]+)/);
        if(String(spaceDefaultSize) !== "null"){
            if($(window).innerWidth() >= 0){
                slickSpacing(spaceDefaultSize[1], self)
            }
        }
        if(String(spaceSmSize) !== "null"){
            if($(window).innerWidth() >= 576){
                slickSpacing(spaceSmSize[1], self)
            }
        }
        if(String(spaceMdSize) !== "null"){
            if($(window).innerWidth() >= 768){
                slickSpacing(spaceMdSize[1], self)
            }
        }
        if(String(spaceLgSize) !== "null"){
            if($(window).innerWidth() >= 992){
                slickSpacing(spaceLgSize[1], self)
            }
        }
        if(String(spaceXlSize) !== "null"){
            if($(window).innerWidth() >= 1200){
                slickSpacing(spaceXlSize[1], self)
            }
        }
        if(String(spaceXxlSize) !== "null"){
            if($(window).innerWidth() >= 1400){
                slickSpacing(spaceXxlSize[1], self)
            }
        }
    });
}
$(window).on('resize load', function(){
    slickSlider();
});

HTML Code

<div class="service-slider overflow-hidden" data-default="[space=1]" data-xl="[space=5]">
    <div></div>
    <div></div>
    <div></div>
</div>

score 0 · Answer 18 · answered Sep 02 '22 at 05:59

You can fake it by adding a border to the slide items. Not by overriding Slick Slider styles, but by adding the border to the elements that you created that will get converted to the slider. Something like this:

.my-slide-element {
    &:not(:first-child):not(:last-child) {
        border-left: 2px solid white;
        border-right: 2px solid white;
    }

    &:first-child {
        border-right: 4px solid white;
    }

    &:last-child {
        border-left: 4px solid white;
    }
}

How add spaces between Slick carousel item

18 Answers18

Linked