Slick carousel的slider-nav项窗口缩放时隐藏的JS修复需求

当前使用Slick carousel组件时存在以下问题：页面加载或刷新状态下slider-nav显示正常，但点击某一滑块（如第5个）后调整窗口大小（resize），激活滑块（active slide）之前的所有项会被移出屏幕。需要不依赖.slick-track { left: 0 !important; }这类强制CSS的JavaScript解决方案。

解决方案思路 #

借助Slick官方提供的API，在窗口resize事件触发后，重新将当前激活的滑块定位到可视区域内。通过获取当前激活滑块索引，调用Slick的定位方法强制组件重新计算滑块容器位置，同时加入防抖处理避免频繁触发导致性能损耗。

具体实现代码 #

// 获取slider-nav元素
const $sliderNav = $('.slider-nav');

// 初始化Slick（根据你的实际配置调整）
$sliderNav.slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  focusOnSelect: true,
  // 其他你的配置项
});

// 防抖函数，控制resize事件触发频率
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 处理resize时的滑块定位逻辑
function fixSliderPosition() {
  // 获取当前激活滑块的索引
  const activeSlideIndex = $sliderNav.slick('slickCurrentSlide');
  // 跳转到当前激活索引，强制Slick重新计算位置（关闭动画提升流畅度）
  $sliderNav.slick('slickGoTo', activeSlideIndex, false);
}

// 绑定防抖后的resize事件
$(window).on('resize', debounce(fixSliderPosition, 250));

原理说明 #

• 防抖函数：避免窗口 resize 过程中频繁执行定位逻辑，减少不必要的DOM操作，提升页面性能。
• slickCurrentSlide：Slick API提供的方法，用于获取当前处于激活状态的滑块索引。
• slickGoTo：调用该方法跳转到当前激活的滑块位置，第二个参数设为false可以关闭过渡动画，让修正过程更顺滑，同时触发Slick内部的位置计算逻辑，自动修正滑块容器的偏移问题。

如果上述方案效果不佳，也可以尝试在resize时调用$sliderNav.slick('reinit')重新初始化组件，但slickGoTo的方式更精准针对当前激活项的定位问题，性能开销也更小。

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