P-旋转木马表现不可预测

Question

我有以下代码

    <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>

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'
    ];

问题是，当[circular]选项为真时，当我单击carousel_5.jpg的next按钮时，它不会显示任何图像。此外，它还存在一些问题，显示当前的图像位置在底部。

我做错什么了？

Answer 1

改变numVisible="1"和numScroll="1"

到[numVisible]="1"和[numScroll]="1"

否则，您将字符串“1”绑定到输入，这会破坏旋转木马组件。

Answer 2

使用numVisible="3“numScroll=1”“代替numVisible="1”numScroll=1“

  <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>

https://primefaces.org/primeng/showcase/#/carousel