Vertical + centerMode results in wrong (active - 1) visible slide

[ViliamKopecky]

When using both vertical: true and centerMode: true, slick shows wrong (if 3rd should be active, it shows 2nd) item in the center. Yet the slick-current class is on the correct slide.

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

http://jsfiddle.net/fzaof6x2/1/

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

Steps to reproduce the problem

1. Use both vertical and centerMode configuration: { vertical:true, centerMode:true }

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

What is the expected behaviour?

• correct: 3rd dot is active
• correct: slide 3 has slide-current class (=> red background)
• correct: slide 3 is in the center

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

What is observed behaviour?

• correct: 3rd dot is active
• correct: slide 3 has slide-current class (=> red background)
• wrong: slide 2 is in the center

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

More Details

• Which browsers/versions does it happen on? Latest Chrome
• Which jQuery/Slick version are you using? Both Latest
• Did this work before? Haven't used it before.

[Luneya]

I might be making a stupid comment and I do not intend to offend: but did you know the slides start counting at 0? So if you set 'initial' slide 0 it is dot+slide 1?

[ViliamKopecky]

@Luneya nope, that's not the problem - look at the jsfiddle (http://jsfiddle.net/fzaof6x2/1/).

I have just updated the jsfiddle. Previously i didn't fork it, so it was the original example link.

[Luneya]

Hmm.
When the settings are set like this:
http://jsfiddle.net/fzaof6x2/2/

slidesToShow: 3, slidesToScroll: 1,

The active slide is in the middle. But the height would probably be an issue? That might be fixable with some CSS.

I myself don't really know how else to address this issue.
Hopefully someone else can!

[1000ship]

It's too late to answer. but in my case,

{ centerPadding: "0px" }

When I added this option, It works.
default value is "50px", I don't know why it is tho

[kristianld]

@1000ship

I'm not sure why but it worked. Thank you!