Angular17+PrimeNG17轮播设autoplayInterval后显示两行求助

问题根源 #

PrimeNG 17轮播在开启自动播放（设置autoplayInterval）时，默认会生成克隆幻灯片用于实现无缝滚动过渡。当numVisible设为1时，克隆逻辑和布局计算冲突，就会出现重复幻灯片、容器换行的异常。

实用解决方案 #

1. 禁用克隆（无需无缝滚动场景） #

直接在p-carousel标签中添加[circular]="false"，关闭无缝滚动逻辑，自动播放时就不会生成克隆项：

<p-carousel 
  [value]="slides" 
  [numVisible]="1" 
  [autoplayInterval]="3000"
  [circular]="false"
>
  <ng-template let-slide pTemplate="item">
    <!-- 你的幻灯片内容 -->
    <div class="slide-item">{{ slide.content }}</div>
  </ng-template>
</p-carousel>

2. 强制布局约束（保留无缝滚动场景） #

如果需要保留无缝滚动效果，通过CSS强制轮播容器和单张幻灯片的宽度一致，让克隆项隐藏在视口外：

.p-carousel .p-carousel-items-container {
  width: 100% !important;
}
.p-carousel-item {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

3. 升级PrimeNG补丁版本 #

PrimeNG 17早期版本存在轮播布局计算的bug，建议升级到最新的17.x补丁版本：

npm update primeng --save

验证流程 #

1. 先关闭自动播放，确认numVisible=1时单张幻灯片显示正常
2. 开启自动播放，应用上述配置/样式后，检查是否仍存在重复项或两行布局

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