如何隐藏轮播（carousel）中的单张幻灯片并消除空白占位问题

问题原因 #

绝大多数轮播组件初始化时会自动统计所有幻灯片DOM节点的数量，以此计算滚动步长、总滚动宽度/高度、分页索引等参数。你通过display: none隐藏指定幻灯片只是做了视觉隐藏，该节点依然存在于DOM结构中，轮播计数时仍会将其计入总数量，因此滚动到对应索引位时就会出现空白区域。

可行解决方案 #

方案1：直接移除目标DOM节点（最稳妥） #

不需要的幻灯片直接从DOM中删除，完全不参与轮播的参数计算，不会出现适配问题：

• 如果你使用的是对应WordPress插件，直接在后台删除对应 testimonial 条目即可
• 无法修改后台配置的话，可以在轮播初始化执行前运行JS移除目标节点：

// 匹配到要隐藏的幻灯片后直接移除
document.querySelector('.testimonial-item.equal-height.style-6').remove()

注意要确保这段代码的执行时机早于轮播初始化代码。

方案2：初始化轮播时过滤隐藏项 #

如果需要保留该DOM节点只是不参与轮播，可以给要隐藏的幻灯片额外加一个自定义类（比如exclude-carousel-item），然后在轮播初始化的配置项中，指定幻灯片的选择器为排除该类的规则：

/* 给要隐藏的项加自定义类，也可以同时加display:none做视觉隐藏 */
.exclude-carousel-item {
  display: none;
}

// 示例（根据你使用的轮播组件语法调整）
new Carousel('.carousel-container', {
  // 只把不带exclude类的节点计入幻灯片
  itemSelector: '.testimonial-item:not(.exclude-carousel-item)'
})

方案3：隐藏后手动刷新轮播配置 #

如果你已经完成轮播初始化才隐藏节点，可以调用轮播组件自带的更新方法，让轮播重新统计当前有效的幻灯片数量、重新计算布局参数即可，主流轮播组件都支持该能力：

// 示例1：Swiper组件
mySwiper.update()

// 示例2：Owl Carousel组件
$('.owl-carousel').trigger('refresh.owl.carousel')

补充：纯CSS临时方案 #

如果暂时无法修改JS代码，可以用以下CSS规则临时处理，仅对部分非自适应宽度的轮播生效：

.testimonial-item.equal-height.style-6 {
  position: absolute !important;
  left: -9999px !important;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

该方案通过将元素移出可视区域、消去占位尺寸实现隐藏，不会改变轮播容器内的子元素布局流占位，部分场景下可以避免空白，但兼容性不如JS方案，优先推荐前三种方案。

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