p-carousel 行为不可预测

问题描述

    <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] 选项为 true 时，当我点击 carousel_5.jpg 处的下一步按钮时，它不会显示任何图像。在底部显示当前图像位置也存在一些问题。

我做错了什么？

解决方法

更改 numVisible="1" 和 numScroll="1"

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

否则，您将字符串“1”绑定到输入，这会破坏轮播组件。

使用 [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

angular primeng