Boostrap scripts in tabs and slider loaded last?

Question

PHP

Hey!
There are tabs on Boostrap4
Inside each tab there is a slider.
When the page is refreshed, the slider on the first tab loads and works normally.
And on the following tabs, the slider is displayed incorrectly until you move it with the cursor or until you open the browser inspector on it.
How to remove this error? Maybe it's a feature of Bootstrap?

Test Case
There is an example Tabs->Lightbox->Slider and Slider->Slider

Tried unsuccessfully:
1) Make the slider activation script load on page load.
Wrapped in
$(document).ready ( function(){ ... });
Either function funonload() { ... }
Either function funonload() { ...} window.onload = funonload;

2) I tried to use different sliders, I settled on Slick JS
3) I cleaned all the errors in the console, no result.

Answer 1

Have you seen that with every click of the slider, an error flies to the console?

Index.html:43 Uncaught TypeError: $(...).animate is not a function
    at HTMLAnchorElement.<anonymous> (Index.html:43)
    at HTMLAnchorElement.dispatch (

We need to figure out why $('html, body') doesn't have the animate() function. I can assume that some jQuery libraries are missing.

Answer 2

Most likely, the slider does not get the dimensions of its workspace, perhaps it is launched before the popup is opened.
When you pull it, it calculates everything, and when you open the inspector, the window is resized and recalculated in the same way.
As a possible solution - $(window).resize(), but this is a rake.

Answer 3

Watch errors in the console and profile events, and don't blindly poke code with wrappers and don't expect it to work...
All debugging is done ONLY step by step!