Unable to slide when number of slide items <= slidesToShow and you set initialSlide: 1 (except first one)

First off all, thanks for this amazing slider. I have been using it for a while in various projects and found this issue while trying to achieve certain requirements on a project.

I am trying to achieve sync slider where I can set initialSlide to specific slide. But when number of slide items are less than or equal to slidesToShow, it doesn’t activate slider and also not showing prev and next buttons (as slide items are less or equal than slidesToShow). I am not able to go back to first slide using thumbnails because of this situation. Below are the codepens with different scenarios.

This could probably be duplicate of https://github.com/kenwheeler/slick/issues/1630, https://github.com/kenwheeler/slick/issues/1098, https://github.com/kenwheeler/slick/issues/1504

Let me know what I can do to get this working.

====================================================================

Issue

Below pen is when slide item = slidesToShow, initialSlide = 1 (Not able to slide through to first item from thumbnails) https://codepen.io/cooldhavs/pen/mLxMZa

Works fine

Below pen when everything works if slide item > slidesToShow, initialSlide = 1 https://codepen.io/cooldhavs/pen/BxrdzO

====================================================================

Steps to reproduce the problem

1. Create sync slider from Slider Syncing example
2. Keep slide item <= slidesToShow number
3. Set initialSlide to any slide other than first slide

====================================================================

What is the expected behaviour?

One would expect that it will let you slide if you have initialSlide something other than first slide even though you have less slide items than slidesToShow. That way you can go back to first slide from thumbnails.

====================================================================

More Details

• slick version "slick-carousel": "^1.6.0",

[Nitroxid]

I having the same problem. Changing the margin I have on .slick-slide to a border sadly does nothing for me. My workaround for now is, to calculate the slidesToShow like this min(3,imageCount-1) so it is always less than the image count. That fixes the problem with the missing arrows.

Another problem is, that I use CSS to change the opacity of non-active slides. When I have three images the third is being slightly transparent, because I need to set slidesToShow to 2.

It would be nice, if slidesToShow could be at least equal to the number of slides.

The only options I’m using are { slidesToShow: 3, centerMode: true, variableWidth: true, }, Version is 1.8.0

Tested in Firefox 60.0.2 and Chromium 66.0.3359.181 on Ubuntu 18.04

[YuanWenqing]

@yesiamben Thanks for your solution. We tried a lot of different settings for slider and may miss this one.

But this solution will break when centerMode is set. It forces nav slider to a wrong position. Would you have some idea for that?