如何在 Slick 轮播图中动态过滤隐藏幻灯片并正确生成分页点（dots）

使用 slick 初始化轮播时，若容器内存在带 `d-none` 类的隐藏子元素，直接调用 `slickadd` 会导致分页点数量错误（包含隐藏项）。正确做法是通过 `slickfilter` 方法动态过滤掉 `.d-none` 元素，使轮播仅基于可见项渲染滑块和分页点。

Slick 提供了原生的 slickFilter 方法，专用于在初始化后动态筛选有效滑块项——它会重新计算 slidesToShow、slidesToScroll、总幻灯片数及分页点（dots）数量，完全替代手动预筛选 + slickAdd 的错误组合。

✅ 正确实现方式如下（关键修改已高亮）：

$('.column').each(function () {   const elementsContainer = $(this).find('.elements');    // 清理已初始化实例   if (elementsContainer.hasClass('slick-initialized')) {     elementsContainer.slick('unslick');   }    // 获取所有子元素（含 d-none）   const allChildren = elementsContainer.children();   const visibleSlides = allChildren.not('.d-none');    // 隐藏整个容器或列（当无可见项时）   $(this).toggleClass('d-none', visibleSlides.length === 0);   elementsContainer.toggleClass('d-none', visibleSlides.length === 0);    if (visibleSlides.length > 0) {     elementsContainer.slick({       autoplay: false,       dots: visibleSlides.length > 1,       arrows: false,       infinite: false,       speed: 300,       appendDots: $(this),       dotsClass: 'dots',       slidesToShow: 1,       slidesToScroll: 1,       swipeToSlide: visibleSlides.length > 1,       draggable: visibleSlides.length > 1,     });      // ✅ 关键修复：使用 slickFilter 替代 slickAdd     elementsContainer.slick('slickFilter', ':not(.d-none)');   } });

⚠️ 注意事项：

• slickFilter(selector) 必须在 slick() 初始化之后调用，且会自动触发重绘（包括 dots 更新、dom 重排、当前 slide 重定位）；
• 不要混用 slickAdd() / slickRemove() 与 slickFilter() —— 后者是声明式过滤，前者是命令式增删，逻辑冲突会导致状态不一致；
• 若后续需动态显示/隐藏幻灯片（如响应用户操作），可再次调用 slickFilter(‘:not(.d-none)’) 实现即时同步；
• slickFilter 会保留原始 DOM 结构，仅在 Slick 内部逻辑中排除匹配元素，因此 .d-none 元素仍保留在 DOM 中，不影响 css 或 js 其他逻辑。

? 总结：slickFilter 是 Slick 处理“条件性幻灯片展示”的标准方案。相比手动提取 jquery 集合再 slickAdd，它能确保分页点、导航按钮、滚动行为、响应式配置等全部模块与实际可见项严格对齐，是简洁、健壮且符合框架设计意图的解法。