Display data of primeng carousel into 2 rows-CodePudding

I am using primeng carousel to display the data/items but the requirements ask for the items to be displayed into 2 different rows per page 5 items for each row and then when we click next we are presented with the other items the 11nth. I have tried to manipulate it as much as I can but with no success at best I display 5 items visually correct but when I set [numVisible]="10" it all clumps up into a single row. Anyone knows how you can achive this with primeng carousel ? enter image description here enter image description here

<p-carousel [value]="laboratori" [numVisible]="10" [numScroll]="5" [responsive]="true"
    *ngIf="step == 0 && laboratori.length != 0">
    <ng-template let-lab pTemplate="item">
      <div >
        <div  style="height: 90%;">
          <div  [ngClass]="lab?.nome != laboratorioSelected?.nome? 'tail': 'tailSelected'"
            type="button" (click)="selectLaboratorio(lab)">
            <div  style=" align-self: center;">
              <h5 >{{lab?.nome}}</h5>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </p-carousel>

CodePudding user response：

If you wanted to display those 10 items, and then 10 more items the same way, you would need to create an Array with a complex item object inside, and like I said, for each item, you loop on the 10 children each time. Not that complex I guess :) Each Item has simply 10 children.

Actually, if you look closely at your example on fiddle, it does exactly what I told you about, meaning they group the items to have kind of "rows" :

<div >
    <div ><h4>1</h4> <h4>2</h4></div>
</div>

The items are "grouped" by 2. So if you wanted to do that, just group your items like I said in your data, it would look like something :

data = [
  { obj1: some, obj2: thing },
  { ... }
]

Or you group by 10 ... your choice really :)