使用 slick 初始化轮播时，若容器内存在带 `d-none` 类的隐藏子元素，直接调用 `slickadd` 会导致分页点数量错误（包含隐藏项）。正确做法是通过 `slickfilter` 方法动态过滤掉 `.d-none` 元素，使轮播仅基于可见项渲染滑块和分页点。
Slick 提供了原生的 slickFilter 方法，专用于在初始化后动态筛选有效滑块项——它会重新计算 slidesToShow、slidesToScroll、总幻灯片数及分页点（dots）数量，完全替代手动预筛选 + slickAdd 的错误组合。
✅ 正确实现方式如下（关键修改已高亮）：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
$('.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，它能确保分页点、导航按钮、滚动行为、响应式配置等全部模块与实际可见项严格对齐，是简洁、健壮且符合框架设计意图的解法。
