即使我将 numVisible 设置为 1，Prime NG 轮播也会在设置 autoplayInterval 属性后显示两行

Question

我在 Angular 17 项目上使用 PrimeNG v17。 在使用轮播时，我遇到了一些问题。

numVisible

道具在非自动播放模式下效果很好。 但是一旦我设置了

autoplayInterval

道具，它就会显示 2 行。

<p-carousel [value]="carousels" [numVisible]="numVisible" [numScroll]="1" orientation="horizontal" [circular]="true"
  [showNavigators]="false" [autoplayInterval]="3000" (onPage)="onPageChange">
  <ng-template let-carousel pTemplate="item">
    <div class="w-full h-[560px] bg-cover flex flex-col justify-end"
      [style.backgroundImage]="'url(' + '../../../../assets/images/' + carousel.img + ')'">
      <!-- some contents here -->
    </div>
  </ng-template>
</p-carousel>

正如您在上面的代码部分所看到的，轮播上应该只有一行，但它显示了两行。 如果有人有此问题的经验并解决了它，请让我帮忙。 谢谢你。

Answer 1

由于您配置了

flex

属性，请删除 Flex 类，这将解决您的问题，这是一个工作示例，其配置与您的问题相同并且工作正常。

如果您仍然不满意这个答案，请分享回来重复相同问题的 stackblitz！

primeng 轮播演示

<div class="card">
  <p-carousel
    [value]="products"
    [numVisible]="1"
    [numScroll]="1"
    orientation="horizontal"
    [circular]="true"
    [showNavigators]="false"
    [autoplayInterval]="3000"
  >
    <ng-template let-product pTemplate="item">
      <div
        class="border-1 surface-border border-round m-2 text-center py-5 px-3"
      >
        <div class="mb-3">
          <img
            src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}"
            [alt]="product.name"
            class="w-6 shadow-2"
          />
        </div>
        <div>
          <h4 class="mb-1">{{ product.name }}</h4>
          <h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
          <p-tag
            [value]="product.inventoryStatus"
            [severity]="getSeverity(product.inventoryStatus)"
          ></p-tag>
          <div
            class="mt-5 flex align-items-center justify-content-center gap-2"
          >
            <p-button icon="pi pi-search" [rounded]="true" />
            <p-button
              icon="pi pi-star-fill"
              [rounded]="true"
              severity="secondary"
            />
          </div>
        </div>
      </div>
    </ng-template>
  </p-carousel>
</div>

堆栈闪电战