Не отрабатывает slick js

Slick Slider некорректно отрабатывает в том случае, когда слайдер при загрузке страницы сразу скрывается. Пример:

HTML:

<div class="slide flag">
  <div class="is-sale">-10%</div>
  <div class="img"><img src="./images/hit-item-2.png"/></div>
  <div class="type">Стул1</div>
  <div class="name">Eames Style DSR PC</div>
  <div class="price">
    <div class="total">17900 ₽</div>
    <div class="without-sale">27990 ₽</div>
  </div>
  <div class="hidding-info">
    <div class="slider-inner">
      <div class="same img"><img src="./images/hit-item-1.png"/></div>
      <div class="same img"><img src="./images/hit-item-2.png"/></div>
      <div class="same img"><img src="./images/hit-item-1.png"/></div>
    </div>
    <button class="add-cart btn">Добавить в корзину</button>
    <button class="btn one-click">Купить в одни клик</button>
  </div>
</div>

CSS(scss):

.hidding-info {
    padding-bottom: 20px;
    top: 353px;
    background-color: $font-white;
    .slider-inner {
      .same {
        margin-right: 3px;
      }
      display: flex;
      justify-content: center;
    }
    .one-click {
      margin-bottom: 20px;
      background-color: $bg-gray;
      border-color: $bg-gray;
      &:hover {
        background-color: $bg-gray-hover;
        border-color: $bg-gray-hover;
      }
    }
  }
.slick-slide {
    float: left;
  }

JavaScript:

$(document).ready(function(){
  $('.catalogue .slide').hover(function(){
    if($(this).children('.hidding-info').hasClass('show')
    ){
      $(this)
        .children('.hidding-info').css({
          'position': 'relative',
          'z-index' : '0',
        })
        .removeClass('show').hide();
    } else {
      $(this)
        .children('.hidding-info').css({
          'position': 'absolute',
          'top': '405px',
          'z-index' : '100',
          'padding-top': '20px',
        })
        .addClass('show').show();
    }
  });
  $('.slider-inner').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
   arrows: true,
   fade: false,
   vertical: false
  });
});

В итоге все это разворачивается в:

<div class="slider-inner slick-initialized slick-slider">
  <div class="slick-list draggable">
    <div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);">
      <div class="same img slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 0px;">
        <img src="./images/hit-item-1.png">
      </div>
      <div class="same img slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="0" style="width: 0px;">
        <img src="./images/hit-item-2.png">
      </div>
      <div class="same img slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="0" style="width: 0px;">
        <img src="./images/hit-item-1.png">
      </div>
    </div>
  </div>
</div>

При этом:

• Слайды хоть и имеют float, но отображаются все равно друг под другом(ширины для размещения как минимум двух блоков хватает)
• Отсутствуют навигационные стрелки.

Почему так?