如何正确配置 Slick 轮播图以仅对可见幻灯片（非 d-none）生成分页点

如何正确配置 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 计算——这才是解决分页点错位问题的唯一健壮方案。