Parameter for space between slides

[simranbentel]

I noticed that all your demos are applying no space between the slides but rather you are creating the appearance of space by using heading tags as the content in each slide, which have equal margin on all sides. This approach creates an interesting issue though...

If you watch the left and right edge of the slides area as you advance or regress the slides, you can see the content spilling out past the initial left or right edge by the amount of left- or right-margin of each slide's content during the actual transition. I notice that the actual width of the entire .slick-list element includes the left margin of the first viewable slide and the right margin of the last viewable slide.

In an implementation I am working with, the design directive is for the entire .slide-list to go edge to edge width-wise without any space on the left and right side. The extra margin I mentioned in the previous paragraph then poses a problem and I have been playing with various workarounds to create the appearance of a clean edge to edge presentation, none of which I am thrilled with.

I would think you could probably add a spacing parameter to the script that would calculate the space between each slide without any extra space at the beginning or end.

I think this would be the cherry on top of a truly tasty plugin! Cheers!

[kenwheeler]

Flagged for feature review. Thanks.

[paulthecoder]

Would love to see this feature implemented as well. It's critical for many designs for the images to be flush with the edge.

Flexslider has this exact feature, implemented in 2.2.0. It makes sure the carousel is always flush with its container, depending on the specified margin between the slides and number of slides to show. Flexslider 2.2.0 is buggy and I really want to switch to Slick as soon as this feature is implemented.

For example: http://jsfiddle.net/sngcoj5d/5/

Great Job with the slider @kenwheeler !

[matthewlein]

You can solve this with CSS using a similar approach to CSS grid systems. Something like this:

/* the slides */
.slick-slide {
    margin: 0 10px;
}
/* the parent */
.slick-list {
    margin: 0 -10px;
}

Although I bet people would like an option tied to responsive settings too...

[kenwheeler]

@matthewlein yeah thats usually what i do

[teefouad]

@matthewlein This doesn't solve the issue mentioned by @simranbentel and @paulthecoder @kenwheeler +1 for this feature, it's a shame to see it missing in such an awesome plugin.

[Rob-Gould]

Has anyone found a solution for this?

[matthewlein]

I decided to look at this again...and I think I see what you're talking about. The content is visible outside the container because the .slick-list has overflow hidden, and its size is based on the slides. Moving overflow: hidden to .slick-slider or another wrapper fixes that. http://codepen.io/anon/pen/zvWjgE

[simranbentel]

Awesome!

On Oct 26, 2015, at 6:25 AM, Matthew Lein notifications@github.com wrote:

I decided to look at this again...and I think I see what you're talking about. The content is visible outside the container because the .slick-list has overflow hidden, and its size is based on the slides. Moving overflow: hidden to .slick-slider or another wrapper fixes that. http://codepen.io/anon/pen/zvWjgE http://codepen.io/anon/pen/zvWjgE — Reply to this email directly or view it on GitHub https://github.com/kenwheeler/slick/issues/582#issuecomment-151132237.

[Attiasthehun]

Did anyone ever find a fix ever found for this? I like yours @matthewlein but it won't work if you want arrows and dots outside.

[liqiang372]

I made it by directly setting styles to wrapper div

<div key={index} style={{'padding': '5px'}}><img src={img} onClick={onClick}/></div>

[luk3nukem]

You can always use external triggers if you want to place arrows outside of the slider (which wont show if overflow is hidden, using the other method suggested). Something like:

$('.nextarrow').click(function(e) { $('.myslider').slick('slickNext'); });

$('.prevarrow').click(function(e) { $('.myslider').slick('slickPrev'); });

[egemenerd]

Using css animation-delay property, you can hide the slide until the animation stops. Animation delay should be equal to the speed setting of the plugin.

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

.slick-slide { margin: 0px 10px; opacity:0; transition-delay: 0s; transition-duration: 0.2s; transition-property: opacity; transition-timing-function: ease-out; }

.slick-slide.slick-active { opacity:1; transition-delay: 0.3s; transition-duration: 0.2s; transition-property: opacity; transition-timing-function: ease-in; }

[satiroglumustafa]

thank you @egemenerd

[patrick-wc]

You can also do this to make the slides have an equal gap between them but still be flush to their container on the left and right like this:

.c-slick {
    margin-left: -20px;
}

.c-slick__slide {
    padding-left: 20px;
}

Handy if you want to keep everything in line with other elements above and below the slider.

[lsalazar85]

@egemenerd Awesome dude !!! Thank you

[owensco]

@zerodburn mind clarifying a bit? My slider doesn't seem to have a .slick or .slick__slide (only slick-slide). Also are the .c appended signifying a custom class? thx!

[Wooody82]

Thank you @matthewlein ... works perfectly!

[gzurbach]

This solution worked for me in order to get a full-width carousel with spacing between images. I had to move the arrows inside the carousel (i.e. on top of the images).

// Add spacing between images
.slick-slide {
  margin: 0 5px;
}

// Fix external margins
.slick-list {
  margin: 0 -5px;
}
.slick-slider {
  overflow: hidden;
}

// Move arrows on top of images
.slick-prev {
  left: 50px;
  z-index: 1;
}
.slick-next {
  right: 50px;
}

[ShreyderD]

all of the solutions does not work good enough! I think I speak on behalf of all mankind if I say we want it to work like "justify-content: space-between;"

The following helps but there is some imperfection with first and last slides - they have margin too:

/* the slides */
.slick-slide {
    margin: 0 10px;
}
/* the parent */
.slick-list {
    margin: 0 -10px;
}

I've tried to modificate the slick.js:

Part 1:

_.defaults = {
...
customPadding: '15px',
...

Part 2 (line 2051):

...
_.slideWidth = Math.ceil((_.listWidth-(_.options.slidesToShow - 1) * _.customPadding))/ _.options.slidesToShow);
...

But it doesn't work. Apparently my JavaScript skills have need of improvements too. Thus SOS to pros!

[dikiyforester]

It's not necessary to move arrows inside the carousel (when using @gzurbach solution). Alternatively can be used custom arrows outside the .slick-slider. (Same for dots, I guess).

https://jsfiddle.net/xepnvrf8/

In my example, I use a wrapper which has a necessary width and full-width carousel inside with spacing between slides.

The custom arrows have been added inside the wrapper and positioned absolutely outside the wrapper width (that is how it was needed for me).

Now it works perfectly for me.

[ZeroCool-85]

You dont need to set margins just set:

.slick-slide {
    padding: 0 8px;
    box-sizing: border-box;
 }

padding-left/right depends on your centerPadding.

[adamgilmour]

I've worked on a possible solution that seems to work on load and with responsive, haven't tested use with other options though.

Add new option to _.defaults spaceBetweenSlides: null

Line 2077 _.slideWidth = (_.listWidth / _.options.slidesToShow) + (_.options.spaceBetweenSlides / _.options.slidesToShow);

Line 2088 if (_.options.variableWidth === false) _.$slideTrack.children('.slick-slide').width(_.slideWidth - offset).css({marginRight:_.options.spaceBetweenSlides});

I've been working on v1.8.0 so haven't tested this on v1.9.0.

I have noticed that it cuts maybe a pixel off slides at the edges with some parameters :/

[virgiliud]

Here's how I did it with plain CSS.

1. Add space between slides:

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

2. Pull slick-list to left and use calc() to extend:

.slick-list {
  margin-left: -10px; /* px size of slide space */
  width: calc(100% + 20px); /* add double the px size of slide space */
}

This solution works well for all cases except with centerMode because it already extends to the edges. Using JS, you can detect centerMode and omit the custom styles.

Make sure you resize the screen when testing/adding values in inspector, to recalculate the slider values.

calc() is supported by all major browsers.

[GuruKhalsa]

If you add a container div inside of each slide and give it a margin, then make the background of the slides the same as the background behind it, you can achieve the aesthetic of slides with space between them in a way that works with slick's responsive functionality. Won't work for all situations but could work for a lot of simple ones.

[ecupaio]

In latest version as of this comment (1.8.1), slick will nest your slides wthinin two consecutive divs in which you can apply padding to the .slick-slide child div. For example: HTML

<!-- parent slick generated slide -->
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 342px;">
  <!-- child div -->
  <div>
    <!-- my slide -->
    <div class="my-slide"> </div>
  </div>
</div> 

CSS

.slick-slide > div {
  padding: 0 0.5rem;
}

[kochewww]

You dont need to set margins just set:

.slick-slide {
  padding: 0 8px;
  box-sizing: border-box;
 }

padding-left/right depends on your centerPadding.

you saved my life. thank you

[diana-frontdev]

I can't believe it's 2020 and we still have to rely on hacks for this.

[pow44feet]

I use to make equal gap between the slides text-align: center inside the slide .slick-slide { text-align: center; } this i made left and right gaps equal in the slick-track. Maybe it can help someone.

[devaarx]

If you have arrows outside.. try .slick-slide: 0 10px; . It is working for me as margin: 0 10px was not working.

[Aniganesh]

Did anyone ever find a fix ever found for this? I like yours @matthewlein but it won't work if you want arrows and dots outside.

Apply position: absolute on your arrows and position them as needed.

[Slavichek]

Hy everyone: to fix this: in usage "react-slick" library .slick-slide { padding: 0 5px; ///////or what you ned } css properties to item .slider-item { border: 1px solid red; box-shadow..... }

[rondog]

thanks @virgiliud, your solution seemed best as the last visible slide did not have an unnecessary space on the right

[Fabrn]

Hello everyone !

I have been using this plugin quite a bit, sad to see it looks abandoned while being so awesome 😞

Anyway, after trying some of the hacks listed in this issue, didn't find anything fitting with my current need which is a setup using Bootstrap (5.0.2) cards. So I find a pretty simple solution that looks to be working fine, hope it can ever help someone :

<div class="carousel w-50 mx-auto my-5" id="carousel-id">
    <div class="carousel-trigger">
        <!-- In order to ensure each slide has same height -->
        <div class="carousel-slide d-flex align-items-center">
            <div class="card">
                <div class="card-body">
                    <!-- ... -->
                </div>
            </div>
        </div>
        <div class="carousel-slide d-flex align-items-center">
            <div class="card">
                <div class="card-body">
                    <!-- ... -->
                </div>
            </div>
        </div>
        <!-- ... -->
    </div>
</div>

#carousel-id {
    .slick-slide > div {
        display: flex;

        .carousel-slide {
            margin: 5px; // replace by the gap amount you would like to use
        }
    }
}

// Slick configuration
$("#carousel-id").slick({
    infinite: true,
    dots: true,
    rows: 2,
    slidesPerRow: 2
});

[LancerAbir]

Thanks, @ZeroCool-85

You dont need to set margins just set:

.slick-slide {
  padding: 0 8px;
  box-sizing: border-box;
 }

padding-left/right depends on your centerPadding.

Thanks @ZeroCool-85

[ghost]

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

thanks bro

[LuisValgoi]

I solved as below

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

[hossainrabbi]

.slick-active.slick-current { margin-right: 10px !important; margin-left: 0 !important; }

.slick-active { margin-left: 10px; }

[im-hamza-dev]

I'm having this same issue of no-space between between slick-items on mobile. Avoid using centerMode flag. Its the main culprit. Here is a trick you can use to center slick-items: Center align the items from carousel wrapper div element: text-align: center

On settings object: centerMode: false

[alikleit]

Seems that the space between slide is the width calculated by the library. What worked for me:

options:

variableWidth: true

then the suggestion above to play with the styles:

.slick-slide {
   margin-right: {the-spacing}px;
}

[RCNeil]

I achieved with

.slick-slide {
     margin-right: 40px;
}

and the container

.slick-list {
     width:calc(100% + 40px);
}

Adjust the 40px for whatever spacing you need. Maybe use 2024px because it's 2024 and we are still using this thang.

[rr-it]

All the solutions mentioned above work only for the static state. When the slider is moving, they don't correctly clip away the sliding elements on either the left, the right or both sides.

As it is 2024 the browsers have evolved and here is a working solution for modern browsers!

Use clip-path: :tada:

https://jsfiddle.net/mzevrkgy/6/

/* gutter width: 20px */

.slick-slider {
  margin-left: -10px;
  margin-right: -10px;
}
.slick-list {
  clip-path: inset(0 10px 0 10px);
  /* warning: do not set `margin` or `padding` to anything other than `0` here! */
  margin: 0;
  padding: 0;
}
.slick-slide {
  margin-left: 10px;
  margin-right: 10px;
  background-color: thistle;
}

Also see:

• https://caniuse.com/css-clip-path
• https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

[gatinhap]

This worked best for me:

.slick-slider {
  overflow: hidden;
  padding-bottom: 60px; //this created space to place arrow and dots below the slider (which was expected result in my case). You can add instead top/left/right padding depending where you want to keep arrows / dots).
}

.slick-list  {
  margin-left: -30px;
}

.slick-slide {
  margin-left: 30px;
}

It kept all slides in view and spaced between parent container without any gap at the beginning or at the end. Just between them. Worked for mobile and tablet view as well.

[localnetwork]

This works for me:

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

.slick-slider .slick-list {
  margin-left: -15px;
}
.slick-slider .slick-track {
  display: flex;
}

[jamieburchell]

All the solutions mentioned above work only for the static state. When the slider is moving, they don't correctly clip away the sliding elements on either the left, the right or both sides.

As it is 2024 the browsers have evolved and here is a working solution for modern browsers!

Use clip-path: 🎉

https://jsfiddle.net/mzevrkgy/6/

Brilliant. Thanks @rr-it. Interested to know why you warned about using padding/margin however. I have margins to make room for the left and right arrows and this solution still works beautifully!

[rr-it]

@jamieburchell All the padding/margin solutions don't work while the slider is moving. While in moving state the moving slide is overflowing the slider box either on the left or right side or even on both sides. Thereby moving slides do not correctly align with other elements on the webpage.

[jamieburchell]

@jamieburchell All the padding/margin solutions don't work while the slider is moving. While in moving state the moving slide is overflowing the slider box either on the left or right side or even on both sides. Thereby moving slides do not correctly align with other elements on the webpage.

Yep, your clip-path solution solves it - I just meant you warned against using margin/padding in your CSS code comment, so I assumed that would break something when using clip-path (it doesn't as far as I can tell). I guess you just meant don't use the margin/padding solutions because it only works in the static state.

[rr-it]

Setting a margin or padding on the .slick-list-container might make the old problem with overflow reappear, as the clip-path does not work correctly anymore - at least that is what I experienced some time ago.

Edit: Setting a padding on .slick-list-container somehow works, but then of course the slides are visually indented compared to the other content. If this visual look is intended I would actually go for an extra container around the whole slick-slider which implements the indention - and then re-arrange the arrows as needed.

[jamieburchell]

Setting a margin or padding on the .slick-list-container might make the old problem with overflow reappear, as the clip-path does not work correctly anymore - at least that is what I experienced some time ago.

It works https://jsfiddle.net/hvwgp847/ :)