javascript - 不光滑的方法不起作用

Question

我试图弄清楚为什么在成功的 ajax 调用后调用 unslick 方法时它不起作用。我已阅读this发布并正在寻找 slick-initialized 类，但我仍然收到错误

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>

当我在页面加载时初始化 slick 时，标记将如下所示:

<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>

我有一个ajax调用，它只会替换每个slick-slide中的数据

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

函数

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

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

但正如我所提到的，我收到错误并且 HTML 标记如下所示

<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

我相信您调用灵活方法的方式已经改变。

而不是$('.skills_section').unslick();

尝试 $('.skills_section').slick("unslick");

您也可以直接在光滑选项的响应选项内调用此方法