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).

    $('.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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

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

Answer 6

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>

Answer 7

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.

Answer 8

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

Answer 9

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

Answer 10

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

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

Answer 11

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

Answer 12

Just fix css:

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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

for me, this one help me.

 .slick-slide {
    margin-left: 5px!important;
    margin-right: 5px!important;
}
.slick-slider {
    padding-left: 5px;
    padding-right: 5px;
  }

Answer 17

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.

Answer 18

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

Answer 19

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.