p-carousel behave unpredictable

user_15163685 0
Viewed 1557

I have following code

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

The issue is that when [circular] option is true it doesnt show any image when I click on next button at carousel_5.jpg. Also it has some issue with showing current image position at the bottom.

What did I wrong?

primeng angular
2 Answers

Change numVisible="1" and numScroll="1"

To [numVisible]="1" and [numScroll]="1"

Otherwise, you are binding the string '1' to the input and this break the carousel component.

user_150626130

Use [numVisible]="3" [numScroll]="1" instead of 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

user_103492780
Related