Slick: Force sliding behavior when centerMode: true and infinite: false, even when count of slides is less than slidesToShow

[blaiz]

The current behavior of slick.js is that, when using centerMode, if there are less slides than the number of slides to show, slick.js will just show all the slides and prevent any sliding. This is not always the intended behavior. I have an application where I always want sliding, not matter how many slides. So even if I show 3 slides at a time and use centerMode, it should start with no slide on the left, the current (and first slide) at the center, and the second slide on the right, instead of showing all slides. Then I should be able to slide to the second and third slides like I would if I had more slides.

It would be handy to have a boolean setting for this behavior, or simply to decide to force the sliding behavior when using centerMode: true, infinite: false, no matter how many slides there are.

This is probably a duplicate of https://github.com/kenwheeler/slick/issues/1549, https://github.com/kenwheeler/slick/issues/1098, https://github.com/kenwheeler/slick/issues/1504, https://github.com/kenwheeler/slick/issues/1302, https://github.com/kenwheeler/slick/issues/262. It seems like a lot of people are having this issue that could be fixed with a new setting.

The workaround I'm currently using is to dynamically set slidesToShow: 1 when I have 1, 2 or 3 slides, and slidesToShow: 3 when I have 4 or more slides, but that means the interface looks slightly different depending on the number of slides. I'd like it to be consistent, no matter how many slides there are.

[esolitos]

I'm following this with interest.

Currently I'm using Slick in a Drupal site (using the related module) to show a list of images with the "boxed" theme, but when slidesToShow == numSlides the slider doesn't get initialized and the theme doesn't gets loaded correctly due to the different markup.
It would be nice if the carousel was initialized anyway, even it would not be doing anything, just to have the same markup!

[f1nality]

Setting slidesToShowed = 1 helped me.

[blaiz]

Yes, that's what I used as a workaround, but the issue is that I want to maintain the same 3-slide layout no matter how many slides I have.

[lbineau]

Same issue here.

[alexfromapex]

Same issue. I would like to note that it also occurs when the number of slides is equal to the # of slides to show.

[powerbuoy]

I'm having this issue as well. I have the same amount of slides as slidesToShow and while the slider does get initialized (the DIV:s are added by Slick) the slider looks broken, only displays 4 (out of 5) slides and no arrows or touch functionality are added.

Edit: In my case at least, it would be awesome if the slideshow could just function exactly the same as if I had one more slide in it, and let the user slide around regardless. Note that I do have infinite: true in my case though.

[saadan]

did anyone found a solution for this ? 😃

[adsouz]

Same issue here. Please help

[bobmagicii]

i fear we may have to move on. been pulling hair out over this for a while now. :(

[fishnyc22]

Hey All. I have a similar issue with a synced slider. Except I have centerMode:false and infinite:false. Everything works great when the number of slides is > slidesShown but if its <= to slides shown (for the lower thumbnail slider), clicking on the lower slider doesn't trigger the upper slider to move. I've been reading up on different people comment on similar but not exact scenarios. I recently saw that GIT was showing v1.71 (I was running 1.6) and thought that may fix it. But unfortunately the issue persists. Any ideas? I don't have a link to share. This setup is running in a preview mode of a Shopify theme under development. I build a Shopify "Section" to create a news slider for my client. It's not live yet.
Thanks!

[bloycey]

Experiencing the same issue. :( Has anyone found a decent workaround?

[JPustkuchen]

Is slick still maintained? Is someone working on this? Or is there a fork / pull request which fixed it?

[AD1ctive]

I use the following workaround for infinity carousels and it works perfectly: Before initiating Slick, check if the number of slide items is larger than slidesToShow. In case it is not, duplicate the children until there are more slide items than slides to show. Can easily be done with jQuery.

[JPustkuchen]

Well that works but should definitely be handled in the library.

[ghost]

@JPustkuchen i'm also facing same issue so can you please post the code that works for you.

[ryabininea]

Here I wrote a solution to this problem.

https://github.com/kenwheeler/slick/issues/1504#issuecomment-454563955

Sorry, but I do not know how else to report the decision ...