Не могу понять почему не работа slick slider

// Slick Slide Counters
var $mainslider = $('.heroslider')
$mainslider.on('init', function(event, slick) {
  $(this).append('<div class="slider__control"><div class="control__item control__item-arrow" onclick="minusSlide()">Poprzedni</div><div class="slick-counter"><div class="current"></div><hr class="horizontal"><div class="total"></div></div><div class="control__item control__item-arrow" onclick="plusSlide()">Nastepny</div></div>');
  $('.current').text(slick.currentSlide + 1);
  $('.total').text(slick.slideCount);
})
$mainslider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  $('.current').text(nextSlide + 1);
});

// Slick Slider Options
$mainslider.slick({
  draggable: true,
  arrows: false,
  dots: false,
  fade: true,
  infinite: true,
});

.sliderwrap {
  width: 600px;
}

hr.horizontal {
  width: 25px;
  height: 0.1px;
  color: #000;
  margin: auto 3px auto 2px;
}

.slick-counter {
  width: 70px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.slider__control {
  display: flex;
  justify-content: space-between;
}

.control__item {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  border: none;
  background-color: transparent;
  padding: 8px 0;
  overflow: hidden;
}

.control__item-arrow {
  width: 98px;
  font-size: 18px;
  font-weight: 200;
  color: #6A6B6D !important;
  cursor: pointer;
}

<div class="mainbannerwrap">
  <div class="sliderwrapper">
    <div class="sliderwrap">
      <div class="heroslider">
        <div class="item">
          <img src="https://dummyimage.com/600x400/000/fff" alt="">
        </div>
        <div class="item">
          <img src="https://dummyimage.com/600x
                            400/333/fff" alt="">
        </div>
        <div class="item">
          <img src="https://dummyimage.com/600x400/555/fff" alt="">
        </div>
      </div>
      <!--/.heroslider-->
      <div class="slider-progress">

      </div>
    </div>
    <!--/.sliderwrap-->
  </div>
  <!--/.sliderwrapper-->
</div>
<!--/.mainbannerwrap-->