slick 轮播图初始化时若容器内存在带 `d-none` 类的隐藏子元素，其默认会为所有子节点（包括隐藏项）渲染分页点；本文介绍通过 `slickfilter()` 方法精准过滤可见项，确保分页点数量与实际显示幻灯片严格一致。
在使用 Slick 构建响应式轮播组件时，一个常见需求是：动态控制幻灯片可见性（如通过 Bootstrap 的 d-none 类隐藏部分项），同时让分页点（dots）仅对应当前可见的幻灯片。然而，直接调用 .slick('slickAdd', slides) 并不能解决此问题——它只是将 jQuery 集合追加到轮播中，但 Slick 内部仍以原始 DOM 子节点数量计算分页点总数。
✅ 正确解法是使用 Slick 内置的 slickFilter() 方法，它会：
- 从轮播中逻辑移除匹配选择器的幻灯片（不删除 DOM，仅从轮播索引中剔除）；
- 自动重算 slidesToShow、slidesToScroll 及 dots 总数；
- 保持原有 DOM 结构，便于后续动态显示/隐藏切换。
✅ 推荐修复代码（关键改动已高亮）
$('.column').each(function () {
const $this = $(this);
const $elementsContainer = $this.find('.elements');
// 清理已有实例
if ($elementsContainer.hasClass('slick-initialized')) {
$elementsContainer.slick('unslick');
}
// 获取所有非 d-none 的子元素（即应显示的幻灯片）
const $visibleSlides = $elementsContainer.children().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() 必须在 .slick() 初始化之后调用，否则无效；
- 过滤后若需恢复全部幻灯片，可调用 $el.slick('slickUnfilter')；
- 不要混用 slickAdd / slickRemove 与 slickFilter —— 后者是声明式过滤，前者是命令式增删，逻辑冲突易导致状态错乱；
- 若 d-none 类可能动态变更（如用户交互触发），建议封装 refreshDots() 函数，在类变更后再次执行 slickFilter(':not(.d-none)') 并调用 .slick('setPosition') 保证 UI 同步。
✅ 总结
slickFilter(':not(.d-none)') 是 Slick 官方推荐的、语义清晰且副作用可控的解决方案。它从根本上将“可见性控制”与“轮播逻辑”解耦，避免手动计算索引或 hack DOM，既保障了分页点数量准确，又维持了代码可维护性与健壮性。
