Question

我正在尝试解决为什么在成功调用ajax之后调用它时，unslick方法不起作用。我已阅读this帖子，正在寻找slick-initialized课程，但我仍然收到错误

TypeError：。如果（。$ slides.parent（）。hasClass（＆＃39; slick-track＆＃39;）），$ slides为null

HTML

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

当我在页面加载时初始化光滑时，标记将如下所示：

<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");

您也可以直接在光滑选项

中的响应选项中调用此方法

Answer 2

使用setTimeout初始化slick（）

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

Answer 3

我之前从未见过这条错误消息。

我将假设＆＃34;光滑克隆的3个实例＆＃34;在stackoverflow示例中只是一个复制/粘贴错误。如果你真的有＆＃34; slick-cloned＆＃34;出现在所有这些时间，你的错误就出现了。 unslick（）方法需要删除所有＆＃34; slick-cloned＆＃34;幻灯片作为过程的一部分。如果它删除了所有幻灯片，则说明幻灯片为空的原因。

在实际的js文件上读取第627行，看看它是这样做的： https://github.com/kenwheeler/slick/blob/master/slick/slick.js

unslick方法不起作用

3 个答案: