Slick: Carousel breaks when slidesToShow number is bigger then number of slides

[maarcin]

Hi,

There is an issue/bug with slidesToShow option. I use Slider Syncing and for example I set slidesToShow to 9. When I have 8 slides carousel breaks:

1. centerMode option doesn't work
2. Carousel doesn't scroll
3. Arrows are hidden

Here is the example: http://jsfiddle.net/fmo50w7n/35/

Any ideas how to solve this?

Cheers

[shrmnk]

What I did was to add a check on the number of child elements that the slick will be added on.

If the number of (child elements - 1) is less than the currently assigned slidesToShow, then it will change the slidesToShow value to (child elements - 1).

Modified your script with a very basic check along with an alert showing the new slidesToShow value:
http://jsfiddle.net/b3w2edak/

You can add more robust checks (negative values, etc.) if you'd like.

[maarcin]

Thanks ShrmnK, but looks like your fiddle address is wrong. I see there exactly the same example as I provided.

Cheers

[shrmnk]

That's odd, try this link: http://jsfiddle.net/b3w2edak/4/

Anyway, it was basically adding this chunk above your navigator slick:

    // Set preferred slidesToShow
    var slidesToShow = 8;
    var childElements = $('.slider-nav').children().length;
    // Check if we can fulfill the preferred slidesToShow
    if( slidesToShow > (childElements-1) ) {
        // Otherwise, make slidesToShow the number of slides - 1
        // Has to be -1 otherwise there is nothing to scroll for - all the slides would already be visible
        slidesToShow = (childElements-1);
    }

and changing the

    slidesToShow: 8,

to

    slidesToShow: slidesToShow,

[mistahenry]

I am having the same issue. rather than a workaround, does anyone know what the crux of the issue is?

[shrmnk]

I believe there is no check implemented on the value of slidesToShow in slick. It would not logically be possible to show more slides than there are elements - hence, the error.

[maarcin]

Thanks :) Appreciate the code and help. Cheers

[jj-carlson]

@shrmnk Brilliant fiddle! I'm running into the centerMode issue as referenced above by @blaiz. I'm hoping the answer is out there. Many blessings!

[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 and doesn't require to change slidesToShow.

[ryabininea]

I have a solution

Replace in slick.min.js (full version "slick.min.js" not work for me)

(i.slideWidth=Math.ceil(i.listWidth/i.options.slidesToShow),
i.$slideTrack.width(Math.ceil(i.slideWidth*i.$slideTrack.children(".slick-slide").length)

to

(i.slideWidth=Math.ceil(i.listWidth/i.options.slidesToShow),
i.$slideTrack.width(Math.ceil(i.$slideTrack.children(".slick-slide").length<i.options.slidesToShow?_.listWidth:i.slideWidth*i.$slideTrack.children(".slick-slide").length)

And this code in not minificated file:
start in line 2050:

if (_.options.vertical === false && _.options.variableWidth === false) {
            _.slideWidth = Math.ceil(_.listWidth / _.options.slidesToShow);
            _.$slideTrack.width(Math.ceil((_.slideWidth * _.$slideTrack.children('.slick-slide').length)));

need replace to

if (_.options.vertical === false && _.options.variableWidth === false) {
            _.slideWidth = Math.ceil(_.listWidth / _.options.slidesToShow);
            _.$slideTrack.width(Math.ceil((_.$slideTrack.children('.slick-slide').length < _.options.slidesToShow?_.listWidth:_.slideWidth * _.$slideTrack.children('.slick-slide').length)));

This is my first comment. Thank you

[jitchavan]

@kenwheeler
I am facing kind of same issue. only difference is number of slides are less than slidesToShow.
This issue may be resolved with the below change in css.
In slick.css at line no. 30 if we add width to 100 % .

.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%; /* added this line only */
}

Above css change resolve the percentage assigned to each slide and stops the html from breaking.