如何正确配置 slick 轮播图以仅对可见幻灯片（非 `d-none`）生成分页点 — slick 轮播图在初始化时若直接添加所有子元素（含隐藏项），会导致分页点数量与实际可见幻灯片数不一致；本文介绍通过 `slickfilter` 方法精准筛选可见项，确保分页点数量严格匹配 `:not(.d-none)` 元素个数。
Slick 轮播图默认会基于初始化时传入的 DOM 结构（或后续通过 .slickAdd() 添加的节点）自动计算分页点（dots）数量。但问题在于：.slickAdd(slides) 并不会“重置”轮播图的内部 slide 计数逻辑——它只是追加节点，而分页点仍依据初始容器中全部子元素（包括带 d-none 的隐藏项）生成。
根本解法是使用 slickFilter：它不仅从可视区域移除匹配元素，还会同步更新轮播图的内部 slide 索引、总数量及分页点渲染逻辑，从而确保 dots 数量 = 当前过滤后可见幻灯片数量。
✅ 正确写法（替换原 .slick('slickAdd', slides) 行）：
if (slides.length > 0) {
elementsContainer.slick({
autoplay: false,
dots: slides.length > 1,
arrows: false,
infinite: false,
speed: 300,
appendDots: $(this),
dotsClass: 'dots',
slidesToShow: 1,
slidesToScroll: 1,
swipeToSlide: slides.length > 1,
draggable: slides.length > 1,
});
// ✅ 关键修正：用 filter 替代 add，确保内部状态与可见 DOM 严格一致
elementsContainer.slick('slickFilter', ':not(.d-none)');
}⚠️ 注意事项：
- slickFilter() 必须在 .slick() 初始化之后调用；
- 过滤器选择器（如 ':not(.d-none)'）需作用于轮播图直接子元素（即 elementsContainer.children()），否则无效；
- 若后续动态增删 d-none 类，可再次调用 slickFilter(':not(.d-none)') 触发重绘（Slick 会自动 diff 并更新 dots）；
- 避免混用 .slickAdd() / .slickRemove() 与 slickFilter()，否则可能引发状态冲突。
? 总结：slickFilter 是 Slick 提供的语义化、状态安全的筛选机制，比手动预处理 DOM 或 hack .slick('getSlick').slideCount 更可靠。它让轮播图“真正理解”哪些幻灯片应被纳入交互与 UI 计算——这才是解决分页点错位问题的唯一健壮方案。
