Why is slick slider not initialized in tab?

Question

JavaScript

example

In the example, when you go to the next tab, the tab (second tab) should display a slick slider, but for some reason it doesn't work until you start clicking on the next\prev button.
As I understand it, this is due to the fact that the block in which the slider is placed initially has the display: none;.

How can this be fixed?

Answer 1

with tabs in bootstrap did this

$('[href="#tab4"]').on('shown.bs.tab', function (e) {
            $('.carousel').resize();
        });

Answer 2

You understand correctly.
After opening the tab:
$slider.slick("setPosition");