Left translate is wrong when centerMode is true and there is only one slide

[stevevg]

When centerMode is on, and I have only one slide, and slidesToShow = 1, the slide is translated to the left, but I have no way to move it to the center.

Issue happens both using slick 1.4.1 and 1.5.5

Following is the code (cut to just show the "interesting" part)

                $('#offerte-home').slick({
                    autoplay: true,
                    autoplaySpeed: 5000,
                    slidesToShow: 3,
                    dots: true,
                    arrows: false,
                        responsive: [
                            {
                                breakpoint: 480,
                                settings: {
                                    arrows: false,
                                    centerMode: true,
                                    centerPadding: '40px',
                                    slidesToShow: 1,
                                    /*infinite: false,*/
                                    autoplay: false
                                }
                            }
                        ]
                });

The following image shows what happens (left) vs. the expected behavior (right).

The problem seems to reside in the .slick-track CSS, which reports

transform: translate3d(-220px, 0px, 0px);

while the expected would be

transform: translate3d(0px, 0px, 0px);

[vinamrajais]

I found the same problem, when carousel is empty and I try to add slides using slickAdd(...) Looks like calculation for _.slideOffset in below lines are wrong https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1037-L1038

_.slideOffset is used to set targetLeft, which in turn used to set x co-ordinate for translate3d(..) https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1625

Thanks, Vinni

[vinamrajais]

I modified the calculation to _.slideOffset += .slideWidth * Math.floor((.options.slidesToShow + 1) / 2) - _.slideWidth;

This make the first slide to center align while adding through slickAdd.

In centerMode there are + 1 slide (half left and half right), so shouldn't it adds + 1 while calculating? @kenwheeler please comment.

Thanks, Vinni

[vinamrajais]

Here is fiddle to display the center alignment issue http://jsfiddle.net/Vinni/444usgku/

Add slides one by one, 1st slide will start from left but not center. After 6th slide is added all slides will be centered.

[simeydotme]

Nice fiddle!

[vinamrajais]

Thanks, I leverage it from http://kenwheeler.github.io/slick/ source code. :) If you agree with issue, can you label this as 'bug'.

[lexcode]

Hi there I've been experiencing the exact same issue but it works if I roll back to v1.6.0

[alvindera97]

This issue is still open in 2024 😢