question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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