Slick Slider仅移动端适配问题：窗口缩放后滑块失效

云上老周

2026-7-30

解决Slick Slider窗口尺寸切换后无需刷新即可生效的问题

核心思路

Slick Slider初始化后不会自动监听窗口尺寸变化，所以需要手动监听resize事件，根据屏幕尺寸动态初始化/销毁Slider，同时用防抖避免频繁操作影响性能。

具体实现代码

1. 基础判断与工具函数

// 设定移动端的宽度阈值（可根据需求调整）
const MOBILE_WIDTH = 768;

// 判断当前是否为移动端屏幕
function isMobileScreen() {
  return window.innerWidth < MOBILE_WIDTH;
}

// 防抖函数：避免resize事件频繁触发
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

2. Slider的初始化与销毁

// 初始化Slick Slider（替换成你的配置）
function initCardSlider() {
  $('.card-container').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    arrows: false,
    infinite: false
    // 其他自定义配置...
  });
}

// 销毁已初始化的Slider
function destroyCardSlider() {
  if ($('.card-container').hasClass('slick-initialized')) {
    $('.card-container').slick('unslick');
  }
}

3. 监听尺寸变化并处理

// 处理尺寸切换逻辑
function handleScreenResize() {
  if (isMobileScreen()) {
    // 移动端且未初始化Slider时，执行初始化
    if (!$('.card-container').hasClass('slick-initialized')) {
      initCardSlider();
    }
  } else {
    // 非移动端且已初始化Slider时，销毁Slider
    destroyCardSlider();
  }
}

// 页面加载时先执行一次，确保初始状态正确
$(document).ready(function() {
  handleScreenResize();
  // 绑定resize事件，用防抖控制触发频率
  $(window).on('resize', debounce(handleScreenResize, 250));
});