Problem with slick slider?

Question

JavaScript

Installed and connected the slider. But the site has switching between tabs and each tab has a slider, in the first tab after loading everything is displayed as it should, but when you switch to another tab, all the slides are shifted into a heap. How can I solve this problem, or advise a similar library with adaptive sliders, I found it myself but I need 3 slides initially on the screen.


There should be slides in rectangles, but it turns out in a heap, but when you click on the arrows, everything is restored.

<div class="lic-slider" id="lic1">
     <div class="slider">
         <p>TEXT</p>
    </div>
     <div class="slider">
         <p>TEXT</p>
    </div>
     <div class="slider">
         <p>TEXT</p>
    </div>
     <div class="slider">
         <p>TEXT</p>
    </div>
</div>

and the code for launching the slider

$('#lic1').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

the same for the rest of the tabs, only the id changes.

Answer 1

The problem is most likely that the inactive tab has a width or height of zero, try fixing