centerMode not centering correctly

See original GitHub issue

I’ve been having issues getting centerMode to center the first slide on initialisation when using variableWidth. I find that I have to move to the next slide, and back again for Slick to work out what the center actually is.

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

The provided jsfiddle required too much reworking to be relevant as this is a variable width example. I kept it as simple as possible though.

http://jsfiddle.net/1wyegw6L/16/

Interestingly in my real-world example the offset goes the other way, to the right. It actually looks like the first slide is just being offset by 50% with no correction for the slides width:

screen shot 2017-03-14 at 15 49 19

But once I’ve gone forward and then back a slide it corrects itself:

screen shot 2017-03-14 at 15 50 39

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

What is the expected behaviour?

Center the slideshow with a focus on the first slide.

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

What is observed behaviour?

The first slide is off-center on initialisation, but centers itself after navigation.

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

More Details

- Which browsers/versions does it happen on? Chrome 56.0.2924.87 (64-bit)

- Which jQuery/Slick version are you using? jQuery 3.1.1 Slick 1.6.0

- Did this work before? Before when?

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:36 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
astralmastercommented, Feb 1, 2020

Two and a half years later, the bug still exists.

8reactions
timbowencommented, Mar 24, 2020

Two and a half years later, the bug still exists.

centerPadding to 0 fixes it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

SlickJS carousel centerMode not working - Stack Overflow
To fix this just center the image withing its parent div using margin:auto . $(document).ready(function() { $('.center') ...
Read more >
slick - the last carousel you'll ever need - Ken Wheeler
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
Read more >
Can't center div inside slick-slider item with flex - Laracasts
Hi,. Wrap it in another div, give that div 100% and try to center its contents. I assume you are talking about tailwindcss?...
Read more >
Center mode doesn't show next and previous slide - Drupal
slidesToShow = 3. Or 5, or any odd number, as otherwise not working well with centerMode on. Other relevant settings: Center mode =...
Read more >
Slick Slider horizontal mode - centermode & infinite dont work.
Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found