Prime NG carousel displays two rows after setting autoplayInterval props even I set the numVisible to 1

Question

I'm using PrimeNG v17 on the Angular 17 project. While working with the carousel, I have weird issue. numVisible prop work well in non-autoplay mode. But once I set autoplayInterval props, it shows 2 rows.

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

As you can see in the above code part, there should be only one row on the carousel but it displays two rows. Here is the brief HTML Dom after it was built.

<div class="p-parousel-items-content">
  <div class="p-carousel-items-container">
    <div class="p-carousel-item">
      <!-- slide 1 -->
      <!-- slide 1 -->
    </div>
    <div class="p-carousel-item">
      <!-- slide 2 -->
      <!-- slide 2 -->
    </div>
    <div class="p-carousel-item">
      <!-- slide 3 -->
      <!-- slide 3 -->
    </div>
    <div class="p-carousel-item">
      <!-- slide 4 -->
      <!-- slide 4 -->
    </div>
    <div class="p-carousel-item">
      <!-- slide 5 -->
      <!-- slide 5 -->
    </div>
    <div class="p-carousel-item">
      <!-- slide 6 -->
      <!-- slide 6 -->
    </div>
    <div class="p-carousel-item">
      <!-- slide 7 -->
      <!-- slide 7 -->
    </div>
    <div class="p-carousel-item">
      <!-- slide 8 -->
      <!-- slide 8 -->
    </div>
    <div class="p-carousel-item">
      <!-- slide 9 -->
      <!-- slide 9 -->
    </div>
  </div>
</div>

There should be only one slide part in each div with p-carousel-item class, but there are two duplicated slides. I have tried this but it's also not working.

.p-parousel-items-content
  .p-carousel-items-container
  .p-carousel-item:nth-child(2) {
  display: none;
}

Please let me help if anyone has experience with this issue and resolved it. Thank you.

Answer 1

If you're using SSR, the Hydration process can cause this issue, you could turn off autoplayInterval by setting [autoplayInterval]="0" However if you need the autoplay feature to work, the solution would be to add the host: {ngSkipHydration: 'true'}, in your component. OR even better; create a child component that will specifically handle the carousel then add the ngSkipHydration flag on it.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { CarouselModule } from 'primeng/carousel';

@Component({
  selector: 'app-carousel',
  standalone: true,
  imports: [CommonModule, CarouselModule],
  templateUrl: './carousel.component.html',
  styleUrl: './carousel.component.scss',
  host: { ngSkipHydration: 'true' },
})
export class CarouselComponent { }