Why do JS sliders display crookedly inside bootstrap's built-in slider?

Question

css

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.
Tried on a lower version, Bootstrap3 = error repeats.
1) How to remove this error? Maybe it's a Bootstrap feature?
2) Please advise how then it is possible to implement an adaptive slider with a slider inside?
Unsuccessfully tried:
1) Make the slider activation script loaded on page load.
wrapped in
$(document).ready ( function(){ ... });
Либо function funonload() { ... }
Либо function funonload() { ...} window.onload = funonload;
2) Пробовал использовать разные слайдеры, сейчас остановился на простейшем Slick JS
3) Почистил все ошибки в консоли, никакого результата.

Answer 1

Во-первых, почему так происходит:
На неактивных вкладках скорее всего display: none; у контента. Слайдер не может корректно просчитать размеры элементов.
Решение:
Делать инициализацию слайдера по клику на вкладку. Нажатие на вкладку, условно, №2 должно инициализировать слайдер только в ней. И, желательно, убивать ранее инициализированный слайдер