Slick: Whitespace issue at the end of slider

[josephmarkus]

My carousel container is 400px wide, each slide is 100px wide and in total there are 10 slides. In my settings, I have it set to scroll 4 slides at a time. When I reach the end of the slide, there is undesired whitespace there.

JSFiddle

http://jsfiddle.net/238598/drdydokx/1/

Steps to reproduce the problem

Use the following settings
$(".slider").slick({ dots: false, slidesToShow: 4, slidesToScroll: 4, autoplay: false, infinite: false, variableWidth: true, centerMode: false, initialSlide: 0, });

What is the expected behaviour?

When clicking 'next' arrow, the slider should check whether there are 4 slides to scroll? If so, go ahead, if not, then scroll the remaining slides.

What is observed behaviour?

When clicking 'next', it scrolls through 4 slides at a time even when there might be just 2 slides left to scroll.

More Details

This issue is present in 1.5.9 version of slick.js
Tested in Chrome 48.0.2564.116 for Mac

[leggomuhgreggo]

Hey @megaslug thanks for the solid bug report! I think this is a duplicate of #1968 and related also to this one #1207, which has the most discussion. I'm going to close it, but feel free to give those issues a bump. It's a tricky issue!

[mazzaker]

Why you set variableWidth: true if there is a fixed slide width?

Fiddle

If you need the variableWidth ignore my post ;)

[josephmarkus]

@mazzaker I was clearly playing with options trying to find the right combination for the design I was working on. Disabling variableWidth resolved my problem. Thank you very much.

[jfcartier]

Hi there :)
Personnally, I wouldn't consider this task as resolved, because I'm currently facing this precise problem. I intentionally need to set the carousel as variableWidth:true and indeed, theres a big white gap at the end. Not very clean, so if you guys have any workaround for me, I'll take it :)

Thanks a lot

[mazzaker]

Can you please build a small fiddle with the slides width you want to use.

[jfcartier]

Sure! http://jsfiddle.net/drdydokx/26/
I think the proper behaviour would be to limit the movement when the last element has reached the right side, so we can avoid that unwanted white space

[groomain]

I have the same issue. I would like to finish the slider when the last slide reach the right of the slider.

Any idea to solve this?

Regards,

[jfcartier]

@groomain , there's a (bugged) workaround here #2635. But the author doesnt seem to plan to fix it anytime soon.
In my case, this is a huge problem and I'm thinking about using another library.. even if I love slick.

Edit : I havnt tried it yet, but @PiotrKalachyn seem to have found a solution on #1207. Here's what he wrote :

What solved it for me was setting slidesToShow N-1, where N is the total number of slides. The number has to be at least the amount of slides that can be visible in the slider at the same time. Setting it to an x >= N prevented autoplay.

[groomain]

@jfcartier Thanks a lot. This PR https://github.com/kenwheeler/slick/pull/2635 is exactly what I needed.

Regards,

[foysalremon]

I have a fix which may help for now now https://codepen.io/foysalremon/pen/KoWjLg

[jfcartier]

@foysalremon, your link isnt working

[foysalremon]

@jfcartier My mistake, I have updated the link.

[RetroCIB]

Slick.prototype.getLeft :

[..]
//
var listSlides = _.$slides,
widthList = _.listWidth,
widthSliders = 0;
//
for (var index = 0; index < listSlides.length; index++) {
widthSliders += listSlides[index].offsetWidth;
}
//
if(widthList > widthSliders){
targetLeft = -0;
}else if( - targetLeft + widthList > widthSliders){
targetLeft = - ( widthSliders - widthList );
}
//
return targetLeft;

[hafidk]

For mobile devices, setting swipeToSlide to false and slidesToScroll / slidesToShow having the same value solved the issue.

[Takhine]

What worked for me was to do the following:
1) set margin auto on the images within the slick-container i.e margin: auto (only works if image has a defined width)
2) set a constant left value to the left arrow i.e left: -40px
3) set a constant right value to the right arrow i.e right -50px

Hope this helps.
Cheers!

[fedegilles]

I was running into the same problem and by just adding "variableWidth: true," solved it. Thanks!!!

The hole js code:

$(document).ready(function() {

    $('.prods-wrapper').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: true,
    nextArrow: $('.next'),
    prevArrow: $('.prev'),
    });

    });

[isahohieku]

This worked for me

.slick-initialized .slick-slide { display: flex; justify-content: center; }