Slick轮播含display:none幻灯片时点指示器计数异常问题

我用以下代码初始化Slick轮播组件：

$('.column').each(function () {
  const elementsContainer = $(this).find('.elements');

  if (elementsContainer.hasClass('slick-initialized')) {
    elementsContainer.slick('unslick');
  }

  var slides = elementsContainer.children().not('.d-none');
  $(this).toggleClass('d-none', slides.length == 0);
  $(elementsContainer).toggleClass('d-none', slides.length == 0);

  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,
      })
      .slick('slickAdd', slides);
  }
});

轮播功能正常，但点指示器的数量始终是elementsContainer.children().length，而非预期的slides.length——会给带d-none类的隐藏幻灯片也生成点指示器。这些隐藏幻灯片可能在elementsContainer的任意位置，怎么实现只给非隐藏幻灯片生成对应的点指示器？

问题核心是初始化Slick时，容器内仍保留着带d-none的隐藏元素，Slick会默认把所有子元素当作轮播项，后续slickAdd操作又重复添加了筛选后的幻灯片，导致指示器数量错误。以下两种方案可解决：

方案一：临时移除隐藏元素，初始化后按需放回（保留原DOM结构） #

$('.column').each(function () {
  const elementsContainer = $(this).find('.elements');

  if (elementsContainer.hasClass('slick-initialized')) {
    elementsContainer.slick('unslick');
  }

  // 临时移除隐藏幻灯片并暂存
  const hiddenSlides = elementsContainer.children('.d-none').detach();
  const visibleSlides = elementsContainer.children();

  $(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,
    });
  }

  // 若需保留原隐藏元素的DOM位置，执行此步放回
  elementsContainer.append(hiddenSlides);
});

方案二：替换容器内容为筛选后的幻灯片（无需保留隐藏元素位置） #

$('.column').each(function () {
  const elementsContainer = $(this).find('.elements');

  if (elementsContainer.hasClass('slick-initialized')) {
    elementsContainer.slick('unslick');
  }

  const visibleSlides = elementsContainer.children().not('.d-none').clone();
  // 清空容器，仅保留可见幻灯片
  elementsContainer.empty().append(visibleSlides);

  $(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,
    });
  }
});

关键说明 #

两种方案都是确保Slick初始化时，容器内只有非隐藏的幻灯片，这样Slick就只会基于可见幻灯片生成对应数量的点指示器，从根源避免隐藏元素干扰计数。

内容的提问来源于stack exchange，提问作者Rando Hinn