如何在Slick Slider中实现按钮点击筛选及解决slick('refresh')未定义问题

问题原因排查 #

首先refresh方法是Slick Carousel 1.4.0版本之后才新增的API，如果你使用的是更早的版本，调用该方法自然会提示未定义。除此之外还有两种常见触发场景：

• 调用方法的DOM对象不是已经完成Slick初始化的实例
• 在Slick未完成初始化时就提前触发了方法调用

正确实现步骤 #

1. 版本兼容性处理

如果你用的是1.4.0以下版本，可直接升级到Slick稳定新版，或改用旧版兼容的reInit方法，更推荐升级避免其他兼容性问题。

2. 高兼容筛选实现逻辑（推荐）

该方案不需要依赖refresh方法，适配所有Slick版本，不会出现实例异常问题：

// 提前存储所有轮播项的原始副本，避免筛选后丢失原始数据
const originalSlides = $('.slick-slider').slick('getSlick').$slides.clone();

// 绑定筛选按钮点击事件
$('.filter-btn').on('click', function() {
  const filterCondition = $(this).data('filter'); // 按钮上自定义的筛选标识，比如分类ID
  const $slider = $('.slick-slider');
  
  // 先销毁当前已初始化的Slick实例
  if ($slider.hasClass('slick-initialized')) {
    $slider.slick('unslick');
  }
  
  // 筛选符合条件的轮播项
  let filteredSlides;
  if (filterCondition === 'all') {
    filteredSlides = originalSlides.clone();
  } else {
    filteredSlides = originalSlides.clone().filter(`[data-category="${filterCondition}"]`);
  }
  
  // 替换轮播容器内的内容
  $slider.html(filteredSlides);
  
  // 重新初始化Slick，配置参数和你首次初始化时保持一致即可
  $slider.slick({
    // 你的原有配置，比如 dots: true, slidesToShow: 3 之类的参数
  });
});

3. 基于refresh方法的轻量筛选实现

确认版本符合要求后，可采用修改轮播项显隐+刷新实例的方式实现：

$('.filter-btn').on('click', function() {
  const filterCondition = $(this).data('filter');
  const $slider = $('.slick-slider');
  
  // 切换轮播项的显示状态
  $slider.find('.slick-slide').each(function() {
    if ($(this).data('category') === filterCondition || filterCondition === 'all') {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
  
  // 调用refresh方法刷新Slick实例的计数和滚动逻辑
  if ($slider.hasClass('slick-initialized')) {
    $slider.slick('refresh');
  }
});

注意：如果用显隐的方式实现筛选，要确保Slick初始化时关闭infinite: true配置，否则无限滚动生成的克隆项会导致筛选逻辑异常。

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