Slick: Slides in second tab not aligned properly until first slide-action

[Luneya]

short description of the bug / issue, provide more detail below.

Using Bootstrap (4 alpha) nav-tabs I am loading a slick slider in each tab. Searching the issues on this GitHub, I have found several small edits to make the sliders work -even though the inactive tabs are hidden-.

However, after navigating through the active tab and clicking the inactive tab, the items are not aligned in the center as I expected them to be. When scrolling through the items / waiting for the items to scroll, they scroll super-fast and are aligned properly again.

The JDfiddle reproducing the issue:
https://jsfiddle.net/xncowbLL/2/

Steps to reproduce the problem

1. Click the inactive tab, the items are not centered
2. Wait for the slides to move, they go by véry fast and are now properly aligned
3. Go back to the first inactive tab
4. Same thing happens
5. When the slides go from the last item (slide 4) to the first, there is a short pause in the transitions..
6. This can be seen by switching between the 4th and the 1st slide.

What is the expected behaviour?

That the items are always properly aligned

More Details

• Which browsers/versions does it happen on?
  Chrome 59 / Android 6.0.0 Chrome 59 / Firefox 54
• Which jQuery/Slick version are you using?
  In production: jQuery 3.2.1
  Slick 1.6.0
• Did this work before?
  Nope

Note: It could very well be an issue I am causing myself, I do not know a lot about JavaScript/jQuery and I am learning as I go. I hope someone out here can help me fix this odd behaviour :)

[leggomuhgreggo]

Changed line 55 to $('.slick-slider').slick('setPosition'); and it worked. Hope that helps!

[Luneya]

Perfect, thanks a bunch!

[gnana2315]

@leggomuhgreggo Thank you so much