Slick: 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 [email protected] 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.

[Peterdoma]

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>

[lholdsworth]

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

[oweskeez]

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

[malasaad82]

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('.swyper__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;
}

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

[dianastanciu]

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.