Slick: Center mode and center padding not producing a larger center slider image

[apasho]

I'm using center mode and center padding but they does not produce the same result as Ken's example, http://kenwheeler.github.io/slick/, a large center image.

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

https://jsfiddle.net/alanp57/ugv2kvLq/16/

====================================================================
centerMode: true,

centerPadding: "40px"

The center image should be larger.

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

no change.

...

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

I'm using the Chrome browser.

[miroslavpopovic]

Your centerMode is working fine. Slick is setting the class .slick-center on the center item. You just need to define what's the style for that class.

I.e. you can add this to your SCSS file to make the font bigger on center slide:

.slick-center {
  font-size: 3em;
}

Result: https://jsfiddle.net/miroslav/ugv2kvLq/17/

As for centerPadding setting, it's used for the padding of entire list. Not for the padding of the center list item. The documentation is a bit unclear on that (Side padding when in center mode. (px or %)), but if you set some large value and inspect it in dev tools, you can notice that the padding is applied to an entire list.

[apasho]

Thank you for the explanation. I found that Ken's demo uses the following CSS to enlarge the center image:
.center .slick-center h3{-moz-transform:scale(1.08);-ms-transform:scale(1.08);-o-transform:scale(1.08);-webkit-transform:scale(1.08);color:#e67e22;opacity:1;transform:scale(1.08);}

[brisourceful]

Thank you @miroslavpopovic for the clarification. I spent a good hour trying to understand why the centerPadding setting was not functioning until I decided to look through the issues to see if anyone else was having the same problem. The documentation needs to be much more explicit that centerPadding applies to all items. Better yet, that property should be renamed to just, padding.

[djekanovic]

Found a hack that works.

After you make your active slider wider. You usually get sliders to jump, not aligning correctly. And here is the simple fix.

.slick-track {
width: fit-content !important;
}