Angular p-旋转木马

我有以下代码

    <div class="p-offset-2 p-col-8" >
  <p-carousel [value]="carouselBusPhoto"  numVisible="1" numScroll="1"
              [autoplayInterval]="7000" [circular]="true">
    <ng-template pTemplate="header">
      <div class="p-d-flex p-jc-center">
        <h2>Choose the best bus for yourself</h2>
      </div>

    </ng-template>
    <ng-template let-photo pTemplate="item">
      <div class="p-d-flex p-jc-center p-ai-center">
      <img [src]="photo" alt="" style="height: 300px;object-fit: cover">
      </div>
    </ng-template>
     </p-carousel>
      </div>

问题是当

[circular]

选项为true时，当我单击

carousel_5.jpg

上的“下一步”按钮时，它不会显示任何图像。它在底部显示当前图像位置时也有一些问题

我做错了什么？

更改

numVisible=“1”

和

numScroll=“1”

到

[numVisible]=“1”

和

[numScroll]=“1”

否则，您将字符串“1”绑定到输入，这将中断转盘组件。

使用[numVisible]=“3”[numScroll]=“1”而不是numVisible=“1”numScroll=“1”

为自己选择最好的公共汽车

this.carouselBusPhoto = [
      'assets/images/home/carousel_1.jpg',
      'assets/images/home/carousel_2.jpg',
      'assets/images/home/carousel_3.jpg',
      'assets/images/home/carousel_4.jpg',
      'assets/images/home/carousel_5.jpg'
    ];

  <div class="p-offset-2 p-col-8" >
    <p-carousel [value]="carouselBusPhoto"  [numVisible]="1" [numScroll]="1"
                 [autoplayInterval]="7000" [circular]="true">
        <ng-template pTemplate="header">
            <div class="p-d-flex p-jc-center">
                <h2>Choose the best bus for yourself</h2>
            </div>
        </ng-template>
        <ng-template let-photo pTemplate="item">
           <div class="p-d-flex p-jc-center p-ai-center">
              <img [src]="photo" alt="" style="height: 300px;object-fit: cover">
           </div>
       </ng-template>
    </p-carousel>
</div>