Slick: Offset calculation when slideCount == slidesToShow

[basbitfactory]

Hi Ken,

First of all thanks for this superb plugin, really appreciated!

I ran into problems with v1.3.15 (v1.4 and v1.4.1 don't seem to fix it either), when my SlideCount was equal to SlidesToShow (and CenterMode = true and Infinite = true). In this case it was showing only 4 out of 5 slides because on the left a extra margin was added with translate3D.

When looking through your code i found the problem in the getLeft() function.

if (_.slideCount <= _.options.slidesToShow){
            _.slideOffset = 0;
            verticalOffset = 0;
}

Ok, so now the slideOffset = 0;

if (_.options.centerMode === true && _.options.infinite === true) {
            _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2) - _.slideWidth;
        } else if (_.options.centerMode === true) {
            _.slideOffset = 0;
            _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2);
}

So now the slider gets added 1 slideWidth as Offset on the left side, ergo: showing 4 of 5 slides (last one is "hidden"), while this should be no Offset.

Is this something you can fix for upcomming versions?

[j-kwon]

Facing same error here.

[ghost]

Same problem: #1302

[danodm]

I've managed to modify the getLeft() function so that it calculates and centres correctly based on whether slideCount is less than or equal to slidesToShow.

on line _1037_ I modified the if statement from

if (_.options.centerMode === true && _.options.infinite === true) {
     _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2) - _.slideWidth;
} else if (_.options.centerMode === true) {
    _.slideOffset = 0;
    _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2);
}

to

if (_.options.centerMode === true && _.options.infinite === true) {
    if (_.slideCount <= _.options.slidesToShow) {
        _.slideOffset = ((_.slideWidth * Math.floor(_.options.slidesToShow)) / 2) - ((_.slideWidth * _.slideCount) / 2);
    } else {
         _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2) - _.slideWidth;
    }
} else if (_.options.centerMode === true) {
   _.slideOffset = 0;
   _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2);
}

Now the behaviour of the slide is as follows.

If slideCount is less than or equal to slideToShow centre the overall width of all items, else centre to the currently active slide.

[Krknv]

But if I use both centerMode and Infinite at one time (I have 5+ carousels on page with diff count of slides)?

$('#w14').slick({"
    "centerMode":true,
    "infinite":true,
    "slidesToShow":1
})

[jj2020driver]

belisarius's commit resolves the problem.
Also, I think it's necesarry not to add excessive settings while initializing slick. My set was:

        jQuery('.slider').slick({
            slidesToShow  : 5,
            arrows        : true,
            centerMode    : true,
            focusOnSelect : true,
            dots          : false,
            responsive    : [
                {
                    breakpoint: 1000,
                    settings  : {
                        slidesToShow  : 4
                    }
                },
                {
                    breakpoint: 800,
                    settings  : {
                        slidesToShow  : 3
                    }
                }
            ]
        });

And it was working.

[engelfrost]

PR: #1450

[tobias47n9e]

Hi! I can confirm that @danodm 's fix works. Can we get a milestone for this issue, to see in which version will include the fix?

[alexfromapex]

Having same issue

[esolitos]

Hey @kenwheeler any plan to get the fix committed or should we simply rely on a fork/patch?
You would make a ton of people happy fixing this, we all love your Slick carousel!

[kenwheeler]

@esolitos @leggomuhgreggo @simeydotme is #2118 good to go?

[llos]

fix proposed by @danodm works like a charm :)

[leggomuhgreggo]

Fixed in #2118.