Is the Slick slider clumsy?

Question

Slick

There are 3 "product group" buttons. When you click on them, your own slider with products appears. I made three blocks with product groups, two of them are "display:none", one with the active class. when you click on a specific button, I show a specific block (slider). Question: "Why do sliders appear crooked when clicked, only when you make a sweep they become normal and then everything works fine, but the first time is crooked?

$( document ).ready(function() {
  $('.sale').click(function() {
    $('.secondSlider').addClass('activeSlider');
    $('.firstSlider').removeClass('activeSlider');
    $('.thirdSlider').removeClass('activeSlider');
  });
  $('.new').click(function() {
    $('.thirdSlider').addClass('activeSlider');
    $('.firstSlider').removeClass('activeSlider');
    $('.secondSlider').removeClass('activeSlider');
  });
  $('.hits').click(function() {
    $('.firstSlider').addClass('activeSlider');
    $('.thirdSlider').removeClass('activeSlider');
    $('.secondSlider').removeClass('activeSlider');
  });
  
  $('.responsive').slick({
    autoplay: true,
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    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
      }
    }

Answer 1

Because they are hidden during initialization. Initialize slider on button click