如何在 Slick 轮播图中仅对可见（非 d-none）元素生成分页圆点

聖光之護 2026-01-26 00:00:00 次阅读

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 同步。