Slick: When `centerMode` is set to true the `slidesToScroll` property setting is ignored.

[whoacowboy]

Description

When centerMode is set to true the slidesToScroll property setting is ignored.

JSFiddle

http://jsfiddle.net/whoacowboy/g2sozm65/1/

Steps to reproduce

1. Using the centerMode code from you demo page create a jsfiddle
2. Add the slidesToScroll:3 to you properties, hit run
   

   Expected behavior

I would expect the carousel to slide 3 slides when i hit the arrow or swipe the carousel.

Observed behavior

The carousel slides only one slide.

More Details

• Which browsers/versions does it happen on? Chrome, FF, Safari Latest
• Which jQuery/Slick version are you using? 1.6.0
• Did this work before? ?

[whoacowboy]

I went through your code and found this at Line 529.

if (_.options.centerMode === true || _.options.swipeToSlide === true) {
    _.options.slidesToScroll = 1;
}

When i comment out

if (_.options.centerMode === true || _.options.swipeToSlide === true) {
//    _.options.slidesToScroll = 1;
}

It works. It looks like this was vey intentional and don't want to break something else down the line.

It would be great to know the why behind this.

Thanks!

[leggomuhgreggo]

Hey @whoacowboy, yeah, I've been curious about that line too. Can only speculate, but I assume the logic branch for center mode would have gotten messy with slidesToScroll.

[whoacowboy]

@leggomuhgreggo For the most part it works. I have noticed that it using

   `focusOnSelect: true,`

gets out of sync.

@kenwheeler, happy to check this out and see if I can come up with a fix, love to gets your thoughts before I beat myself to death with my monitor trying to figure it out.

[leggomuhgreggo]

@whoacowboy hmm out of sync how?

[whoacowboy]

@leggomuhgreggo I was unable to reproduce the issue with my jsfiddle.

https://jsfiddle.net/whoacowboy/Lkspfvyv/11/

So I checked out my code. I was unable to get centerPadding to work so I added a 10px margin in the css, which was throwing everything off. I removed that margin and it seems to be working without any issues. Occasionally you can see the last carousel item get added, but that is OK for me.

Now the questions is why isn't centerPadding working?

[whoacowboy]

@leggomuhgreggo All my issues are in my css, it seems. Commenting out that one line seems to do the trick though for the centerMode, can make a pull request if you want.

[conica]

@whoacowboy I have the same issue with out of sinc, but it happens with focusOnSelect: false, also
I have the following settings:
infinite: true, centerMode: true, centerPadding: 10, slidesToShow: 5, slidesToScroll: 5, focusOnSelect: false,
it is centered and by commenting out the line in question from js, the slidesToScroll: 5 works fine - until the last scroll
The calculation where the slide set ends and starts seems to be off

[conica]

EDIT: it looks like this issue extends a bit. I changed the settings to infinite: false, centerMode: false, focusOnSelect: true and i am tracking the element that has the .slick-currentclass by writing the assigned title attr in a separate DIV $('.slide-over').text($('.slick-current').attr('title'));

There are 5 slides visible, 5 slides to scroll, and the current is in the first position. At the last scroll (from total of 26 slides) the wrong element is set to current.

At least now we know why this line _.options.slidesToScroll = 1; was added to the code

[whoacowboy]

@conica Can you create a JSFiddle?

[conica]

Sorry for the delay:
So - this is a JSFiddle for a default behaviour
https://jsfiddle.net/Conica/9jonb111/5/
The slider moves only by one regardless of the slidesToScroll value. The values in the alert window triggered on hover are correct

This is for the commented out line in the script and focusOnSelect set to false
https://jsfiddle.net/Conica/dp4j18rb/6/
So - still centered - the problem is in the last scroll where the num of the rest of the elements - or where to loop ends and starts is miscalculated

Now - I changed back to the original script (the line is not commented out) and set the following values infinite: false, centerMode: false, focusOnSelect: true
https://jsfiddle.net/Conica/u3ymxk6r/2/
the centerMode is false, infinite also false, focusOnSelect true
the slick-current should show the first element in scroll - again untill the last scroll. When I came to the last scroll and returned to the first - the first 3 element are unreachable

[solepixel]

+1

[studentIvan]

+1 please fix it or write a solution for this time.

[1ucay]

+1 please fix anybody :)

[huangVic]

+1 please fix

[leggomuhgreggo]

Looks like it was set there deliberately.

I tried hacking it with setOption and slickGoTo, but it looks like it's controlled by the getLeft function which is a private method, but actually I think it's possible fake centermode with styles and slidesToShow

Doubt this will get addressed before v2

[elron]

+1 A fix will be appreciated!

[ryanpcmcquen]

Please fix!

[Choufourax]

If you want to force the use of slidesToShow with centerMode, you do not need to change the core code.
I did it like this :

// 1 - init
$('"#carousel").slick({
    centerMode: true,
    infinite: true,
    slidesToShow: 3,
    speed: 500,
    variableWidth: true,
    accessibility: true
});
// 2 - force slidesToScroll in centerMode
$('"#carousel").slick('slickSetOption', 'slidesToScroll', 3, true);

This works for me but please notice :

• do not use this with focusOnSelect set to true or you will have the bug describe on this thread
• a real core fix would be better and greatly appreciate

[Carlovan]

Could you please remove that check? I think if we notice something wrong when using centerMode we can just set slideToScroll=1 ourselves.

[Slluxx]

+1

[ryanpcmcquen]

Such an easy fix, I guess this is never going to happen though.

[ryanpcmcquen]

Nonetheless, I have a PR out there if anyone cares to :+1: it or whatever: https://github.com/kenwheeler/slick/pull/3513

[EmmanuelBeziat]

This is still a need, thanks.

[MarkWebDev]

+1

[damian-lewita-coderslab]

+1

[tomasts248]

have the same problem

[peterbenoit]

If you want to force the use of slidesToShow with centerMode, you do not need to change the core code.
I did it like this :

// 1 - init
$('"#carousel").slick({
  centerMode: true,
  infinite: true,
  slidesToShow: 3,
  speed: 500,
  variableWidth: true,
  accessibility: true
});
// 2 - force slidesToScroll in centerMode
$('"#carousel").slick('slickSetOption', 'slidesToScroll', 3, true);

This works for me but please notice :

• do not use this with focusOnSelect set to true or you will have the bug describe on this thread
• a real core fix would be better and greatly appreciate

Any idea how to get this to work with the responsive behavior? I really don't want to have to reinitialize the slider with every resize of the browser.

[necronz]

If you want to force the use of slidesToShow with centerMode, you do not need to change the core code.
I did it like this :

// 1 - init
$('"#carousel").slick({
    centerMode: true,
    infinite: true,
    slidesToShow: 3,
    speed: 500,
    variableWidth: true,
    accessibility: true
});
// 2 - force slidesToScroll in centerMode
$('"#carousel").slick('slickSetOption', 'slidesToScroll', 3, true);

This works for me but please notice :

• do not use this with focusOnSelect set to true or you will have the bug describe on this thread
• a real core fix would be better and greatly appreciate

Any idea how to get this to work with the responsive behavior? I really don't want to have to reinitialize the slider with every resize of the browser.

Maybe on resize event will help you. For example:

function slidesToScroll() {
    if ($(window).width() >= 1280) {
        $('#carousel').slick('slickSetOption', 'slidesToScroll', 3, true);
    } else {
        $('#carousel').slick('slickSetOption', 'slidesToScroll', 1, true);
    }
}
slidesToScroll();


$(window).on('resize', function() {
    slidesToScroll();
});

[conica]

Well the point was to use it with focusOnSelect

As for the responsive - you can check it how I solved it on this website https:///www.yumama.com

[elron]

Hey guys I just wanted to share that I have found a slider that has all the features that Slick has and it works great in my personal developing experience.
https://flickity.metafizzy.co/
You might want to check it out, I hope you will find this helpful.
Nonetheless, Slick is great, but it has some flaws (for example, you cant really slide multiple items all at one time, depends on the amount of user interaction - how much he scrolled). so Slick will go only 1 slide or 2 slides each time. it wont be dynamic.

[MarkWebDev]

I also had to move to another slider to support more native touch usage like momentum scrolling: https://swiperjs.com/

[aaccensi]

What a pitty. This seems too basic to be left unfixed. I guess I'll have to try https://swiperjs.com/

[willianbs]

If you want to force the use of slidesToShow with centerMode, you do not need to change the core code.
I did it like this :

// 1 - init
$('"#carousel").slick({
    centerMode: true,
    infinite: true,
    slidesToShow: 3,
    speed: 500,
    variableWidth: true,
    accessibility: true
});
// 2 - force slidesToScroll in centerMode
$('"#carousel").slick('slickSetOption', 'slidesToScroll', 3, true);

This works for me but please notice :

• do not use this with focusOnSelect set to true or you will have the bug describe on this thread
• a real core fix would be better and greatly appreciate

Any idea how to get this to work with the responsive behavior? I really don't want to have to reinitialize the slider with every resize of the browser.

@peterbenoit You could use the breakpoint event. Something like this:

$('"#carousel").on('breakpoint', function(event, slick, breakpoint){
console.log('breakpoint:', breakpoint);
  switch (breakpoint) {
                  case 480:
                    $('"#carousel").slick('slickSetOption', 'slidesToScroll', 1, true);
                  break;
                  default:
                    $('"#carousel").slick('slickSetOption', 'slidesToScroll', 2, true);
                }
              });

[nbilodeau-ubeo]

My turn around with this problem was to hide some slick-dots, like nth-child(even), so now it slides 2 at a time. And of course you can adjust! But of course I've hidden the arrows as wel...