Slick-carousel报错：unslick未定义，移动端滑块加载异常求助

看起来你遇到的核心问题是在Slick还未初始化的情况下尝试调用unslick方法，以及调用unslick的语法不正确。咱们一步步来修复：

问题分析 #

1. 语法错误：销毁Slick的正确方式是$(".container-slick").slick("unslick");，而不是$(".container-slick").unslick("unslick");或者$(".container-slick").slick({ settings:"unslick" });。
2. 初始化状态判断缺失：当页面加载时如果窗口宽度≥768，代码会直接调用unslick，但此时滑块根本没初始化，自然会抛出"undefined"错误；resize时也会出现同样的问题。
3. 重复代码冗余：加载和resize的逻辑几乎一样，可以封装成函数复用。
4. 缺少Slick样式：你的代码里没有引入Slick的CSS文件，这会导致滑块渲染异常，即使JS修复了也看不到正确效果。

修复后的完整代码 #

HTML（补充Slick CSS） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 补充Slick的CSS文件 -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>

<div class="projects_block container-slick no-padding">
  <div class="project_block slide no-padding">
    <div class="project_name">Discover Milan's religious sites</div>
  </div>
  <div class="project_block slide no-padding">
    <div class="project_name">Saint Petersburg Philharmonic Orchestra</div>
  </div>
  <div class="project_block slide no-padding">
    <div class="project_name">Grand Hall Music </div>
  </div>
  <div class="project_block slide no-padding">
    <div class="project_name">Hand-made art & design workshop</div>
  </div>
  <div class="project_block slide no-padding">
    <div class="project_name">Discover Milan's religious sites</div>
  </div>
  <div class="project_block slide no-padding">
    <div class="project_name">Saint Petersburg Philharmonic Orchestra</div>
  </div>
  <div class="project_block slide no-padding">
    <div class="project_name">Grand Hall Music </div>
  </div>
  <div class="project_block slide no-padding">
    <div class="project_name">Hand-made art & design workshop</div>
  </div>
</div>

JavaScript（重构逻辑+状态判断） #

// 封装滑块初始化/销毁的函数
function handleSlickSlider() {
  const $slider = $(".container-slick");
  const isMobile = $(window).width() < 768;

  // 先判断滑块是否已经初始化（通过检查是否有slick类）
  const isSlickInitialized = $slider.hasClass("slick-initialized");

  if (isMobile) {
    if (!isSlickInitialized) {
      // 未初始化则初始化滑块
      $slider.slick({
        centerMode: true,
        infinite: true,
        prevArrow: false,
        nextArrow: false,
        speed: 200,
        slidesToShow: 1
      });
    }
  } else {
    if (isSlickInitialized) {
      // 已初始化则销毁滑块
      $slider.slick("unslick");
    }
  }
}

// 页面加载时执行
$(window).on('load', handleSlickSlider);

// 窗口resize时执行，添加防抖避免频繁触发
let resizeTimer;
$(window).on('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(handleSlickSlider, 200);
});

CSS（保持原有样式，可补充滑块基础样式） #

.projects_block {
  margin-bottom: 2%;
  display: flex;
  font-family: 'montserrat';
  flex-wrap: wrap;
}
.project_block {
  width: 23%;
  height:100px;
  /* 给滑块项加个背景方便看效果 */
  background: #f0f0f0;
  margin: 0 1%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 移动端滑块样式适配 */
@media (max-width: 767px) {
  .project_block {
    width: 100%;
    margin: 0;
  }
}

关键修复点说明 #

1. 状态判断：通过检查元素是否有slick-initialized类（Slick初始化后会自动添加这个类），确保只有在滑块已初始化时才调用unslick，未初始化时才执行初始化。
2. 正确的销毁语法：使用$slider.slick("unslick");来销毁滑块，这是Slick官方文档规定的正确方式。
3. 防抖处理：resize事件添加200ms防抖，避免窗口拖动过程中频繁触发初始化/销毁逻辑，提升性能。
4. 补充Slick CSS：没有CSS的话，滑块的布局和交互效果会完全异常，必须引入官方的样式文件。

这样修改后，页面加载和窗口resize时都能正确切换滑块的状态，不会再出现"Cannot read property 'unslick' of undefined"的错误了。

内容的提问来源于stack exchange，提问作者Randall