unslick method not working

Question

I am trying to work out why the unslick method isn't working when I am calling it after a successful ajax call. I have read this post and am looking for the slick-initialized class, but I am still getting the error

TypeError: .$slides is null if (.$slides.parent().hasClass('slick-track'))

HTML

<div id="skills" class="skills_section">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

When I initialize slick on page load the markup will look like this:

<div id="skills" class="skills_section slick-initialized slick-slider">
  <div class="slick-list draggable">
    <div class="slick-track">
      <div class="slick-slide slick-cloned">Slide 1</div>
      <div class="slick-slide slick-cloned">Slide 2</div>
      <div class="slick-slide slick-cloned">Slide 3</div>
    </div>
  </div>
 </div>

I have an ajax call that will just replace the data in each slick-slide

$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
   success: function(data) {
     unSlickCarousel();
     slickCarousel();
   }
});

Functions

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}

function unSlickCarousel() {
  if($('#skills').hasClass('slick-initialized')){
    $('.skills_section').unslick();
  }
}

But as I have mentioned I get the error and the HTML markup looks like this

<div id="skills" class="skills_section slick-initialized slick-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

Answer 1

I believe the way you call slick methods has changed.

Instead of $('.skills_section').unslick();

try $('.skills_section').slick("unslick");

You call also call this directly inside the responsive option in the slick options